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图 灵 社 区 的 电子 书 没有 采用 专 有 客 
户 端 ， 您 可 以 在 任意 设备 上 ， 用 自 
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内 容 提 要 


本 书 堪 称 Angular 领域 的 里 程 碑 式 著作 ， 涵 盖 了 关于 Angular 的 几乎 所 有 内 容 。 对 于 没有 经 验 的 人 ， 本 














书 平实 、 通 俗 的 讲解 ， 递 进 、 严 密 的 组 织 ， 可 以 让 人 毫 无 压力 地 登 堂 入室 ， 迅 速 领悟 新 一 代 Web 应 用 开发 
的 精通。 如果 你 有 相关 经 验 ， 那 本 书 对 Angular 概念 和 技术 细节 的 全 面 剖析 ， 以 及 引人入胜 、 切 中 肯 移 的 讲 
解 ， 将 帮助 你 彻底 掌握 这 个 框架 








， 在 自己 职业 技术 修炼 之 路 上 更 进一步 。 





本 书 的 读者 对 象 为 所 有 想 要 理解 和 学 习 Angular 的 前 端 开 发 人 员 。 
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E d F 


很 高 兴 这 本 《Angular 权 威 教程 》 成 为 Angular 中 文 资 源 的 一 部 分 ， 和 希望 它 能 广 受 欢迎 ， 给 中 
的 Angular 社 区 提供 一 份 令 人 愉悦 的 学 习 资 源 ， 也 希望 它 帮助 更 多 工程 师 开 始 使 用 下 一 代 
Angular 框 架 来 开发 应 用 。 

我 认识 雪 狼 和 他 所 属 的 Nice Angular 社 区 是 在 2016 年 。 那 时 候 ， 他 们 开始 了 对 Angular 官 方 网 
站 卓越 的 本 地 化 工作 。 现 在 ， 这 份 中 文官 网 已 经 部 署 在 了 angularcn 上 。 

本 书 及 其 翻译 工作 充分 体现 了 中 国 开源 软件 开发 者 的 热情 和 共享 精神 。 感谢 雪 狼 等 来 自 Nice 
Angular 社 区 的 志愿 者 们 对 此 作出 的 贡献 。 愿 本 书 帮助 你 开始 试用 Angular! 祝 你 成 功 ! 


Naomi Black, Google Angular 项 目 经 理 兼 主管 
































作为 一 项 开源 技术 和 前 沿 Web 开 发 框架 , Angular 持 续 吸 引 着 中 国 区 开发 人 员 的 关注 。 作 为 雪 
狠 及 其 所 属 Nice Angular 社 区 的 集体 工作 成 果 , 这 本 书 是 开源 力量 的 又 一 次 证 明 , 证 明 这 种 热情 、 
这 种 志愿 精神 确实 可 以 帮助 业界 享受 到 全 球 最 新 的 开发 技术 。 我 谨 代 表 Google 开 发 技术 推广 部 癌 
这 本 书 的 出 版 表示 祝贺 。 









































栾 跃 ，Google 开 发 技术 推广 部 大 中 华 区 主管 


简介 

以 笔者 之 所 见 ,《Angular 权 威 教程 》 大 概 是 目前 除了 Angular 官 方 文档 之 外 最 全 面 的 学 习 资料 
了 ， 这 从 其 英文 版 多 达 600 多 页 的 篇 幅 就 可 见 一 柬 。 相 应 地 ， 它 面 对 的 对 象 涵盖 了 从 和 人 门 级 到 中 
高 级 的 读者 ， 是 一 本 可 以 陪伴 你 成 长 的 好 书 。 

在 内 容 安排 上 , 本 书 具 有 大 量 的 例子 以 保障 其 足够 浅显 , 但 也 穿插 着 一 些 原理 分 析 以 保障 其 
足够 深入 。 除 此 之 外 , 本 书 还 给 出 了 很 多 外 部 参考 资料 , 让 富有 探险 精神 的 你 可 以 向 专家 级 进发 。 




















翻译 说 明 
未 来 的 版 本 号 及 发 布 计划 





Angular 就 要 出 4.0 了 ! 是 的 ， 过 一 阵子 还 有 Angular 5/6/7/8------ 这 本 书 会 很 快 过 时 吗 ?” 答案 是 
“不 会 "。Angular 开 发 组 对 于 未 来 的 版 本 号 及 发 布 计划 有 一 个 正式 的 说 明 ， 大 意 是 : 


我 们 要 兼顾 向 后 兼容 和 向 前 演进 ， 因 此 以 后 我 们 将 严格 遵循 SemVer 语 义 化 版 本 规 

范 ， 并 力求 让 版 本 升级 变 得 可 预测 ， 以 便 使 用 者 可 以 提前 安排 。 在 大 版 本 号 之 间 会 出 现 

少量 破坏 性 变更 ， 但 是 不 用 担心 ， 相 邻 的 大 版 本 号 之 间 只 会 把 一 些 API 标 记 为 废弃 的 。 

也 就 是 说 , 理想 情况 下 ,4 的 程序 是 可 以 直接 迁移 到 5 的 ， 只 是 会 收 到 一 些 API 废 弃 提 示 ， 

到 6 中 才 会 彻底 移 除 。 同 时 ， 官 方 会 在 文档 中 给 出 详细 的 升级 指南 ， 帮 助 开发 者 升级 。 

因此 ， 尽 请 放心 ，Angular 以 后 绝 不 会 出 现 像 从 1 升级 到 2 这 么 大 的 变化 。 事 实 上 ，NodeJS 现 
在 采用 的 就 是 类 似 的 版 本 策略 ， 提 高 发 布 的 可 预测 性 对 于 工程 化 开发 是 很 有 价值 的 。 

另外 ， 这 里 为 什么 没有 3? 简单 点 说 就 是 因为 路 由 模块 比 其 他 模块 多 发 布 过 一 次 ， 因 此 当 你 
使 用 core 模 块 的 2.0 时 ， 和 它 配套 的 router 模 块 却 是 3.0 的 ,这 容易 让 开发 人 员 困 惑 ， 跳 过 3， 可 以 让 
所 有 模块 的 编号 重新 对 齐 。 









































对 框架 名 称 的 说 明 


Angular 开 发 组 正式 确定 了 新 的 命名 策略 : 用 AngularJS 来 代表 1.x 版 本 ， 而 Angular 代 表 2.x、 
4x、5.x 等 很 多 后 续 版 本 ， 因 为 Angular 2+ 将 支持 TypeScript/JavaScript/Dart， 而 不 再 是 JavaScript。 
这 些 变化 已 经 在 官方 文档 中 体现 出 来 了 ， 而 本 书 也 将 同样 遵循 这 样 的 命名 策略 。 





名 词 : 装饰 器 与 注解 


@Component 等 语法 元 素 在 TypeScript 中 被 称 为 装饰 器 ( decorator ), 但 在 本 书 中 ， 作 者 统一 称 
其 为 注解 (annotation )。 这 两 种 提 法 都 是 正确 的 。 在 语法 层面 ，@Component 确 实 是 装饰 器 ， 这 是 
TypeScript 的 标准 叫 法 ; 但 是 在 语义 层面 ，Angular 中 是 把 它 作 为 注解 使 用 的 。 两 者 的 区 别 是 ， 装 
饰 器 直接 改变 被 装饰 者 的 行为 ， 而 注解 则 提供 元 数据 ， 供 框架 去 根据 这 些 元 数据 做 不 同 的 处 理 。 
在 Angular 目 前 的 版 本 中 ，@Component 确 实 只 是 提供 了 元 数据 。 


我 们 在 跟 原 作者 讨论 之 后 , 决定 还 是 跟随 作者 的 提 法 来 翻译 。 不 过 在 日 常 工作 中 , 还 是 建议 
你 遵循 TypeScript 的 提 法 ， 将 其 称 为 装饰 器 。 







































































支持 与 勘误 
如 果 对 本 书 中 的 一 些 概念 不 太 理解 ， 请 参阅 Angular 官 方 中 文 站 angularcn。 这 里 有 来 自 官 方 
开发 组 的 权威 资料 。 
如 果 对 本 书 有 任何 疑问 或 发 现 问 题 ， 请 到 https://github.com/nice-angular/ng-book-2 提 交 issue。 
同时 ， 对 于 一 些 经 过 确认 的 issue， 我 们 也 会 更 新 在 勘误 区 。 





























关于 我 们 

参与 本 次 翻译 的 一 共有 7 位 成 员 , 都 是 AngularJS 领 域 的 专家 和 Angular 领 域 的 先行 者 。 稍 后 会 
有 我 们 的 简短 介绍 。 

本 书 各 章 的 译 者 和 校对 者 如 下 : 





翻译 一 校 二 校 
第 1 章 雪 狼 、 叶 志 敏 郑 丰 或 郑 丰 或 
第 2 章 破 狼 破 狼 雪 狼 
第 3 章 张 旋 张 旋 雪 狼 
第 4 章 郑 丰 或 郑 丰 或 雪 狼 
第 5 章 破 狼 破 狼 雪 狼 
第 6 章 王子 实 王子 实 雪 狼 
































(E) 
翻译 一 校 二 校 
第 7 章 叶 志 敏 叶 志 敏 叶 志 敏 
第 8 章 雪 狼 雪 狼 雪 狼 
第 9 章 郑 丰 或 HEB ap 
第 10 章 郑 丰 或 郑 丰 或 Hantsy 
第 11 章 郑 丰 或 郑 丰 或 Hantsy 
第 12 章 郑 丰 或 郑 丰 或 ih 
第 13 章 郑 丰 或 郑 丰 或 SR 
第 14 章 HER 郑 丰 或 ii 
第 15 章 Hantsy Hantsy Ir 
第 16 章 雪 狼 雪 狼 张 旋 


除 此 之 外 , 雪 狼 还 承担 了 项 目 管理 











人 敏 负责 与 作者 沟通 ， 并 在 英文 理解 方面 进行 把 关 。 

















我 们 的 感恩 


本 书 得 以 发 行 ， 首 先 要 感谢 Angular 开 发 组 及 其 项 目 经 至 
牵线 搭桥 ， 才 有 了 我 们 和 图 灵 的 这 次 合作 。 














和 中 文 统 稿 工作 ; 破 狼 负责 全 书 的 技术 准确 性 把 关 ; 叶 志 























ENaomi Black。 正 是 由 于 她 的 支持 和 

















我 们 还 要 感谢 Google 开 发 技术 推广 部 及 其 大 中 华 区 主管 栾 跃 和 项 目 经 理 程 路 , 正 是 由 于 他 们 
的 努力 ， 让 Angular 在 中 国 的 推广 普及 工作 有 了 正规 军 的 加 入 ， 而 本 书 的 出 版 正 是 推广 计划 中 的 


我 们 还 要 感谢 图 灵 的 编辑 朱 痢 和 杨 琳 , 在 整个 翻 
帮助 。 本 书 得 以 在 迅速 出 版 的 同时 保证 高 质量 ， 她 们 的 经 验 和 把 


最 后 ， 要 感谢 Angular 中 文 社 区 。 我 所 指 的 并 不 是 由 我 们 几 个 创建 并 管理 的 这 些 QQ 群 、 微 信 









































译 过 程 中 , 她 们 给 了 我 们 许多 专业 的 指导 和 
































KEJE 
































群 等 ， 而 是 指 广义 的 中 文 社区 。 无论 你 在 北京 还 是 上 海 ， 也 无 论 你 在 国内 还 是 海外 ; 无 论 你 是 高 












































为 她 就 是 我 们 每 个 人 。 





手 还 是 新 兵 ， 也 无 论 你 是 否 像 我 们 一 样 是 Angular 的 忠实 粉丝 ， 
的 一 员 。 在 我 们 的 心中 ， 只 有 一 个 Angular 中 文 社 

















你 们 都 是 广义 Angular 中 文 社 区 中 
区 ， 她 不 被 任何 人 拥有 ， 也 被 每 一 个 人 拥有 ， 








固然 ,我们 这 几 位 译 者 都 是 推广 Angular 的 志愿 者 与 先行 者 ， 但 我 们 真正 希望 看 到 的 是 一 个 








繁 来 、 开 放 、 互 通 的 中 文 社区 ， 是 全 球 Angular 社 区 

















的 一 部 分 ， 我 们 希望 看 到 Angular 的 技术 社区 


人 遍地开花。 因此， 如 果 你 有 自己 的 组 织 或 影响 力 ， 请 联系 我 们 ,我 们 愿 与 你 携手 共 进 , 分 享 各 种 
知识 、 渠 道 与 资源 ,共同 制定 与 推进 社区 发 展 计划 。 要 知道 ,无 论 你 将 来 是 求职 还 是 创业 ,一 个 
繁荣 的 社区 都 会 给 你 带 来 强力 的 文 持 。 











一 旦 有 了 共同 的 愿景 和 开放 、 包容 的 文化 , 我 们 就 能 无 视 时 空 的 阻隔 , 在 天 南海 北 守 望 相 助 ， 
共同 面 对 新 技术 的 挑战 与 机 遇 。 纷繁 的 世界 、 冰 冷 的 技术 与 温 暧 的 社区 ,共同 构成 了 本 书 的 出 版 





背景 。 
雪 狼 的 感恩 


汪 志 成 ， 网 名 雪 狼 。ThoughtWorker & Google 开 发 者 专家 (GDE), 拥有 18 年 软件 开 

发 经 验 ， 棠 尚 简单 、 专 业 、 分 享 ,“ 好 为 人 师 ， 好 为 人 师 ”; SHA C AngularJS2R E è 

析 与 最 住 实践 》, 

首先 , 我 要 感谢 我 的 家 人 ,特别 是 我 的 妻子 春 娜 。 为 了 翻译 官方 文档 和 这 本 书 , 我 失去 了 很 
多 陪伴 他 们 的 时 间 ， 没 有 他 们 的 支持 ， 故 事 将 无 从 开始 。 

其 次 ， 我 要 感谢 ThoughtWorks ， 没 有 这 样 一 个 平台 ,我 就 无 法 安心 钻研 技术 ， 更 没有 大 量 把 
新 技术 应 用 于 工程 实践 中 的 机 会 。 

最 后 , 要 特别 感谢 我 刚刚 出 生 的 女儿 ,你 是 激励 我 前 进 的 动力 。 图 女 ,， 看 到 了 吗 ? KEES 
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编写 你 的 第 一 个 Angular 
Web 应 用 








1.1 仿制 Reddit 网 站 

在 本 章 中 ,我 们 将 构建 一 个 应 用 ， 它 能 让 用 户 发 表 推荐 文章 (包括 标题 和 URL ) 并 对 每 篇 文 
章 投 票 。 

你 可 以 把 该 应 用 看 作 类 似 于 Reddit "或 Product Hunt2 的 起 步 版 网 站 。 

这 个 简单 的 应 用 将 涵盖 Angular 中 的 大 部 分 基本 要 素 ， 包括 : 


口 构建 自 定义 组 件 ; 

口 从 表单 中 接收 用 户 输入 ; 

a 把 对 象 列表 演 染 到 视图 中 ，; 

a 拦截 用 户 的 点 击 操作 ， 并 据 此 作出 反应 

读 完 本 章 之 后 ， 你 将 掌握 如 何 构 建 基本 的 Angular 应 用 。 

图 1-1 展 示 了 该 应 用 最 终 完 成 后 的 界面 截图 。 

Ts, 用户 将 提交 一 个 新 的 链接 。 之 后 ， 其 他 用 户 可 以 对 每 篇 文章 投票 :“ 顶 ”或 “ 踩 ”。 48 
链接 都 有 一 个 最 终 得 票数 ， 我 们 可 以 对 自己 认为 有 用 的 链接 投票 (如 图 1-2 所 示 )。 

















(D http;//reddit.com 
@ http://producthunt.com 
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编写 你 的 第 一 个 Angular Web 应 用 











OU nre [stone] 
€ > Q [D localhost:8080 ms 





ws» Angular 2 Simple Reddit 


Adda Link 
Title: 
iPad Game for Cats 
Link: 
| http://ipadgameforcats.com| 
Angular 2 
3 (angular.io) 
POINTS ^^ upvote  downvote 
Fullstack 
2 (fullstack.io) 
POINTS 


^^ upvote © downvote 


1 Angular Homepage 
(angular.io) 


^ upvote  downvote 


i —————————— 2 
图 1-1 完成 后 的 应 用 











| ng-book | 





[Angular 2- Simple Reddit x | 
> Œ [D locathost:8080 

















E 
m| 





ne-book2 Angular 2 Simple Reddit 


Adda Link 
Title: 
Link: 
Angular 2 
6 (angular.io) 
Sh 个 upvote w downvote 
iPad Game for Cats 
4 (ipadgameforcats.com) 
POINTS 


^ upvote  downvote 


Angular Homepage 
3 (angular.io) 


个 upvote w downvote 


—— iaa a — MM 
图 1-2 包含 新 文章 的 应 用 
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在 本 项 目 和 整 本 书 中 ， 我 们 都 将 使 用 TypeScript。TypeScript 是 JavaScript ES6 版 的 一 个 超 集 ， 
增加 了 类 型 支持 。 本 章 不 会 深入 讲解 TypeScript; 如 果 你 熟悉 ES5 (“普通 ”的 JavaScript ) 或 ES6 
( ES2015 )， 那 么 在 后 续 的 学 习 过 程 中 应 该 不 会 有 什么 问题 。 


在 第 2 章 中 ， 我 们 将 更 深入 地 学 习 TypeScript。 因 此 ， 即 使 你 对 某 些 新 语法 不 太 熟悉 ， 也 不 必 
担心 o 





1.2 ”起步 


1.2.1 TypeScript 


要 开始 使 用 TypeScript， 首 先 需要 安装 Node.js。 安 装 方式 很 多 ， 请 参见 Node.js 官 方 网 站 
( https://nodejs.org/download/ ) 了 解 详 情 。 


o 我 必须 用 TypeScript 吗 ? 并 非 如 此 ! 要 使 用 Angular，TypeScript 并 不 是 必需 的 ， 
但 它 可 能 是 最 好 的 选择 。Angular 也 有 一 套 ES5 API， 但 Angular 本 身 就 是 用 
TypeScript 写 成 的 ， 所 以 人 们 一 般 也 会 选用 它 。 本 书 也 将 使 用 TypeScript， 因 为 
它 确 实 很 棒 ， 能 让 Angular 写 起 来 更 简单 。 当 然 ， 并 不 是 非 它 不 可 。 


安装 完 Node.js， 接 着 就 要 安装 TypeScript 了 。 请 确保 安装 1.7 或 更 高 的 版 本 。 要 想 安装 它 ， 请 
运行 下 列 npm 命 令 : 


$ npm install -g typescript 


e 通常 ，npm 是 Node,js 的 一 部 分 。 如 果 你 的 系统 中 没有 npm 命 令 ， 请 确认 你 安装 的 
Node.js 是 包含 它 的 版 本 。 


A Windows 用 户 : 我 们 将 在 全 书 中 使 用 Linux/Mac 风 格 的 命令 行 。 强 烈 建 议 你 安装 
Cygwin"。 借 助 它 ， 你 就 能 直接 运行 本 书 中 的 这 些 命令 了 。 


1.2.2 angular-cli 








Angular 提 供 了 一 个 命令 行 工具 angular-cli,， 它 能 让 用 户 通过 命令 行 创建 和 管理 项 目 。 它 自 
动 化 了 一 系列 任务 ， 比 如 创建 项 目 、 添 加 新 的 控制 器 等 。 多 数 情况 下 ， 选 用 angular-cli 都 是 明 














(D https://www.cygwin.com/ 
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智 的 决定 。 当 你 创建 和 维护 应 用 时 ， 它 能 帮 你 遵循 很 多 常用 模式 。 

要 想 安 装 angular-cli ， 只 要 运行 下 列 命令 即 可 : 

$ npm install -g angular-cli@1.@.@-beta.18 

安装 完毕 之 后 ， 你 就 可 以 在 命令 行 中 用 ng 命令 运行 它 了 。 运行 ng 命令 时 ,你 会 看 到 一 大 堆 输 
出 ， 不 过 不 用 管 它 ; 往 回 滚屏 ， 你 会 看 到 如 下 内 容 : 

$ ng 

Could not start watchman; falling back to NodeWatcher for file system events. 


Visit http://ember-cli.com/user-guide/swatchman for more info. 
Usage: ng «command (Default: help)» 


之 所 以 得 到 这 一 大 堆 输 出 ， 是 因为 当 我 们 不 带 参数 运行 ng 命令 时 ， 它 就 会 执行 默认 的 help 
命令 。help 命 令 会 解释 如 何 使 用 本 工具 。 

如 果 你 在 OS X 或 Linux 上 运行 ， 可 能 还 会 在 输出 中 看 到 这 一 行 : 

Could not start watchman; falling back to NodeWatcher for file system events. 


这 意味 着 我 们 没有 安装 过 一 个 名 叫 watchman 的 工具 。 此 工具 能 帮助 angular-cli 监听 文件 系 
统 的 变化 。 如 果 你 在 OS X 上 运行 ， 建 议 使 用 Homebrew 工 具 安装 它 ， 命 令 如 下 : 


$ brew install watchman 









































e 如 果 你 是 OSX 用 户 并 且 运行 这 个 brew 命 令 时 出 现 错误 ， 那 么 表示 你 尚未 正确 安 
装 Homebrew 工 具 。 请 参阅 http://brew.sh/ 来 安装 它 ， 然 后 再 试 一 次 。 
如 果 你 是 Linux 用 户 , 可 以 参阅 https://ember-cli.com/user-guide/#watchman 来 学 习 


如 何 安 装 watchman。 
如 果 你 是 Windows 用 户 ， 那 么 不 必 安 装 任何 东西 ，angular-cli 将 使 用 原生 的 
Node.js 文 件 监 视 器 。 


现在 你 应 该 已 经 装 好 angular-cli 及 其 依赖 了 。 在 本 章 中 ， 我 们 就 用 它 来 创建 第 一 个 应 用 。 





1.2.3 ”示例 项 目 
现在 ， 环 境 已 经 准备 好 了 ， 我 们 这 就 来 编写 第 一 个 Angular 应 用 吧 
打开 终端 窗口 并 且 运 行 ng _ new 命令， 快速 创建 一 个 新 的 项 目 : 
$ ng new angular2_hello_world 
运行 之 后 ， 你 将 看 到 下 列 输出 : 
installing ng 2 


create .editorconfig 
create README .md 
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和 月 


create src/app/app.component.css 
create src/app/app.component.html 
create src/app/app.component.spec.ts 
create src/app/app.component.ts 
create src/app/app.module.ts 
create src/app/index.ts 
create src/app/shared/index.ts 
create src/assets/.gitkeep 
create src/assets/.npmignore 
create src/environments/environment.dev.ts 
create src/environments/environment.prod.ts 
create src/environments/environment.ts 
create src/favicon.ico 
create src/index.html 
create src/main.ts 
create src/polyfills.ts 
create src/styles.css 
create src/test.ts 
create src/tsconfig. json 
create src/typings.d.ts 
create angular-cli.json 
create e2e/app.e2e-spec.ts 
create e2e/app.po.ts 
create e2e/tsconfig. json 
create .gitignore 
create karma.conf. js 
create package. json 
create protractor.conf.js 
create tslint. json 

Successfully initialized git. 

0 Installing packages for tooling via npm 


它 将 运行 一 段 时 间 ， 进 行 npm 依 赖 的 安装 。 一 旦 安装 结束 ， 我 们 会 看 到 一 条 成 功 信息 : 
Installed packages for tooling via npm. 

这 里 生成 了 很 多 文件 ! 现在 不 用 关心 它们 都 是 什么 。 我 们 会 在 本 书 中 讲解 每 一 个 文件 的 含义 
日 途 。 不 过 现在 ， 我 们 先 把 注意 力 集中 在 如 何 用 Angular 代 码 开始 工作 上 。 

进入 ng 命令 创建 的 angular2 hello world 目 录 ， 来 看 看 它 里 面 都 有 什么 : 


$ cd angular2_hello_world 
$ tree -F -L 1 


























|— README . md // an useful README 

| 一 angular-cli. json // angular-cli configuration file 
一 e2e/ // end to end tests 

| 一 karma.conf. js // unit test configuration 

一 node_modules/ // installed dependencies 

|— package. json // npm configuration 

|l— protractor .conf. js // e2e test configuration 

一 src/ // application source 


L_ tslint. json // linter config file 





第 1 章 编写 你 的 第 一 个 Angular Web 应 用 





3 directories, 6 files 


我 们 目前 关注 的 目录 是 src， 应 用 代码 就 在 里 面 。 下 面 看 看 我 们 在 那里 创建 了 什么 : 


$ cd sre 
$ tree -F 











| |-- app.component.css 
| |-- app.component.html 
| |-- app.component.spec.ts 
| |-- app.component.ts 

| |-- app.module.ts 

| |-- index.ts 

| ^—— shared/ 

| ^-- index.ts 

|-- assets/ 

|-- environments/ 

| |-- environment.dev.ts 
| |-- environment.prod.ts 
| ^-— environment.ts 

|-- favicon.ico 

|-- index.html 

|-- main.ts 

|-- polyfills.ts 

|-- styles.css 

|-- test.ts 

|-- tsconfig. json 

-— typings.d.ts 


4 directories, 18 files 
用 你 惯用 的 文本 编辑 器 打开 index.html， 应 该 会 看 到 如 下 代码 。 


code/first_app/angular2_hello_world/src/index.html 


<!doctype html» 

«html» 

«head» 
«meta charset-"utf-8"» 
«title»Angular2HelloWorld«/title» 
«base href="/"> 


«meta name="viewport" content-"widthzdevice-width, initial-scale-1"» 
«link rel="icon" type-"image/x-icon" href="favicon.ico"> 

«/head» 

«body» 
«app-root»Loading...«/app-root» 

«/body» 

«/html» 


我 们 把 它 分 解 一 下 。 





code/first_app/angular2_hello_world/src/index.html 
<!doctype html» 
<html> 
<head> 
«meta charset="utf-8"> 
<title>Angular2Hel loWorld</title> 
<base href="/"> 


如 果 你 熟悉 HTML , 这 第 一 部 分 就 很 平淡 无 奇 了 ,我 们 在 这 里 声明 了 页 面 的 字符 集 ( charset )、 
标题 (title ) 和 基础 URL ( base href )。 











code/first_app/angular2_hello_world/src/index.html 


«meta name="viewport" content-"widthzdevice-width, initial-scale-1"» 


如 果 你 继续 深入 模板 主体 (body )， 就 会 看 到 下 列 代码 。 





code/first_app/angular2_hello_world/src/index.html 
«app-root»Loading...«/app-root» 

«/body» 

«/html» 

我 们 的 应 用 将 会 在 app-root 标 签 处 进行 泻 染 , 稍 后 剖析 源 代码 的 其 他 部 分 时 还 会 看 到 它 。 文 

本 Loading... 是 一 个 占 位 符 , 在 应 用 代码 加 载 之 前 会 显示 它 。 我 们 可 以 借助 此 技巧 来 通知 用 户 该 应 

用 正在 加 载 ， 可 以 像 这 里 一 样 显示 一 条 消息 ， 也 可 以 显示 一 个 加 载 动画 或 其 他 形式 的 进度 通知 。 


之 后 就 可 以 编写 应 用 代码 了 。 
































1.3 ”运行 应 用 


在 开始 修改 之 前 ， 我 们 先 把 这 个 自动 生成 的 初始 应 用 加 载 到 浏览 器 中 。angular-cli 有 一 个 
内 建 的 HTTP 服 务 器 ， 我 们 可 以 用 它 来 启动 应 用 。 回 到 终端 进入 应 用 的 根 目录 (在 本 应 用 中 
是 ./angular2 hello world 目 录 ) 并 运行 命令 。 




















$ ng serve 
xx NG Live Development Server is running on http://localhost:4200. xx 
// a bunch of debug messages 


Build successful - 1342ms. 




















我 们 的 应 用 正在 localhost 的 4200 端 口上 运行 。 打 开 浏览 器 并 访问 http:/localhost:4200， 结 果 如 
图 1-3 所 示 。 





o 注意 ， 如 果 4200 端 口 由 于 某 种 原因 被 占用 了 ， 也 可 以 在 其 他 端口 号 上 启动 。 仔 
细 阅 读 你 电脑 上 的 输出 信息 ， 找 出 开发 服务 器 的 实际 URL。 
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GAnguiar2Redct x Felipe 


€ © D localhost:4200 


n 


app works! 


图 1-3 ”运行 中 的 应 用 
好 ， 现 在 我 们 设置 好 了 应 用 ， 而 且 知 道 了 该 如 何 运 行 它 ， 可 以 开始 写 代码 了 。 











1.3.1 制作 Component 
Angular 背 后 的 指导 思想 之 一 就 是 组 件 化 。 


在 Angular 应 用 中 , 我 们 写 HTML 标 记 并 把 它 变 成 可 交互 的 应 用 。 不 过 浏览 需 只 认识 一 部 分 标 
签 ， 比 如 cselect、> 、<form> 和 <video> 等 ,它们 的 功能 都 是 由 浏览 胡 的 开发 者 预先 定义 好 的 。 


如 果 我 们 想 教 浏览 器 认识 一 些 新 标签 ， 该 怎么 办 呢 ?” 比如 我 们 想 要 一 个 cweather> 标 签 ， 用 
来 显示 天 气 ; 又 比如 想 要 一 个 loginy> 标 签 ， 用 来 创建 一 个 登录 面板 。 


这 就 是 组 件 化 背后 的 基本 思想 : 我 们 要 教 浏览 器 认识 一 些 拥有 自 定 义 功 能 的 新 标签 。 

































































o 如 果 你 用 过 AngularJS， 那 么 可 以 把 组 件 当 作 新 版 本 的 指令 。 





让 我 们 来 创建 第 一 个 组 件 。 写 完 该 组 件 之 后 ， 就 能 在 HTML 文 档 中 使 用 它 了 ， 就 像 这 样 : 
«app-hello-world»«/app-hello-world» 

要 使 用 angular-cli 来 创建 新 组 件 ， 可 以 使 用 generate (生成 ) 命令 。 

要 生成 hello-wor1d 组 件 ， 我们 需要 运行 下 列 命 令 : 


$ ng generate component hello-world 

installing component 
create src/app/hello-world/hello-world.component.css 
create src/app/hello-world/hello-world.component.html 
create src/app/hello-world/hello-world.component.spec.ts 
create src/app/hello-world/hello-world.component.ts 











那 该 怎么 定义 一 个 新 组 件 呢 ? 最 基本 的 组 件 包 括 两 部 分 : 

(1) Component 注解 

(2) 组 件 定义 类 

下 面 来 看 看 组 件 的 代码 ， 然 后 逐一 讲解 。 打 开 第 一 个 TypeScript 文 件 : src/app/hello-world/ 


hello-world.component.ts - 


code/first app/angular2 hello world/src/app/hello-world/hello-world.component.ts 


import { Component, OnInit } from 'Gangular/core'; 


GComponent ( f 
selector: 'app-hello-world', 
templateUrl: './hello-world.component.html', 
styleUrls: ['./hello-world.component.css' ] 


}) 


export class HelloWorldComponent implements OnInit { 
constructor() { } 


ngOnInit() { 


.ts 而 不 是 js。 问题 在 于 浏览 器 并 不 知道 该 如 何 解 


e» 注意 ，TypeScript 文 件 的 后 组 是 
这 个 问题 ，ng serve 命 令 会 自动 把 .ts 文件 编译 为 js 


释 TypeScript 文 件 。 为 了 解决 
文件 。 





这 个 代码 片段 乍 一 看 可 能 有 点 怒 怖 ， 但 别 担心 ， 我 们 接 下 来 就 会 一 步 步 讲 解 它 。 


1.3.2 ”导入 依赖 


import 语 句 定义 了 我 们 写 代码 时 要 用 到 的 那些 模块 。 这 里 我 们 导入 了 两 样 东 西 : Component 
和 OnInit。 

我 们 从 "@angular/core" 模 块 中 导入 了 组 件 (import Component )。"@angular/core" 部 分 
告诉 程序 到 哪里 查找 所 需 的 这 些 依赖 。 这 个 例子 中 ,我 们 告诉 编译 右 :"@angular/core" 定 义 并 
导出 了 两 个 JavaScript/TypeScript 对 象 ， 名 字 分 别 是 Component 和 OnInit。 

同样 ， 我 们 还 从 这 个 模块 中 导入 了 OnInit (import OnInit )。 稍 后 你 就 会 知道 ，OnInit 能 
帮 我 们 在 组 件 的 初始 化 阶段 运行 某 些 代码 。 不 过 现在 先 不 用 管 它 。 


注意 这 个 import 语 句 的 结构 是 import ( things } from wherever 格 式 。 我 们 把 { things } 
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这 部 分 的 写法 叫 作 解构 。 解 构 是 由 ES6 和 TypeScript 提 供 的 一 项 特性 ， 下 一 章 会 深入 讲解 。 
import 的 用 法 很 像 Java 中 的 import 或 Ruby 中 的 require : 从 另 一 个 模块 中 拉 取 这 些 依 赖 ， 并 

且 让 这 些 依 赖 在 当前 文件 中 可 用 。 

1.3.8 Component 注解 

导入 依赖 后 ， 我 们 还 要 声明 该 组 件 。 


code/first_app/angular2_hello_world/src/app/hello-world/hello-world.component.ts 





@Component ( { 
selector: 'app-hello-world', 
templateUrl: './hello-world.component.html', 
styleUrls: ['./hello-world.component.css'] 


}) 
如 果 你 习惯 用 JavaScript 编 程 ， 那 么 下 面 这 段 代码 可 能 看 起 来 有 点 怪异 : 


@Component ( { 
TP s 
}) 


这 是 什么 ?” 如 果 你 有 Java 开 发 背景 ， 应 该 会 很 熟悉 : 它们 是 注解 。 























AngularJS 的 依赖 注入 技术 在 幕后 使 用 了 注解 的 概念 。 也 许 你 还 不 熟悉 它们 ， 但 
注解 其 实 是 让 编译 器 为 代码 添加 功能 的 途径 之 一 。 





我 们 可 以 把 注解 看 作 添 加 到 代码 上 的 元 数据 。 当 在 HelloWor1d 类 上 使 用 @Component 时 ， 就 
把 Hel lowor1d“ 装 饰 ”( decorate ) 成 了 一 个 Component。 


这 个 capp-hello-wor1d> 标 签 表 示 我 们 希望 在 HTML 中 使 用 该 组 件 。 要 实现 它 ， 就 得 配置 
@Component 并 把 selector 指 定 为 app-hello-wor1d。 


@Component ( { 
selector: 'app-hello-world' 
// ... more here 


}) 

有 很 多 种 方式 来 配置 选择 器 (selector )， 类 似 于 CSS 选 择 器 、XPath 或 JQuery 选 择 器 。Angular 
组 件 对 选择 器 的 混用 方式 添加 了 一 些 特 有 的 限制 ， 稍 后 会 谈 到 。 现 在 ， 只 要 记 住 我 们 正在 定义 一 
个 新 的 HTML 标 签 就 可 以 了 。 

这 里 的 selector 属 性 用 来 指出 该 组 件 将 使 用 哪个 DOM 元 素 。 如 果 模 板 中 有 “app-hello- 
wor1d> </app-hello-wor1d> 标 签 ， 就 用 该 Component 类 及 其 组 件 定 义 信息 对 其 进行 编译 。 




















1.3.4 H templateUrl 添加 模板 


在 这 个 组 件 中 ， 我 们 把 templateUr1 指 定 为 ./hello-wor1d.component.html。 这 意味 着 我 
们 将 从 与 该 组 件 同 目录 的 hello-world.component.html 文 件 中 加 载 模 板 。 下 面 来 看 看 这 个 文件 。 





code/first_app/angular2_hello_world/src/app/hello-world/hello-world.component.html 
<p> 
hello-world works! 
</p> 
这 里 定义 了 一 个 p 标 签 ， 其 中 包含 了 一 些 简单 的 文本 。 当 Angular 加 载 该 组 件 时 ,就 会 读 取 此 
文件 的 内 容 作 为 组 件 的 模板 。 





1.3.5 添加 template 


我 们 有 两 种 定义 模板 的 方式 : 使 用 @Component 对 象 中 的 template 属 性 ; 指定 templateUr1l 
属性 。 


我 们 可 以 通过 传人 template 选 项 来 为 ecomponent 添 加 一 个 模板 : 


@Component ( f 
selector: 'app-hello-world', 
template: ~ 
<p> 
hello-world works inline! 
</p> 











}) 

注意 ， 我 们 在 反 引 号 中 C...) 定义 了 template 字 符 串 。 这 是 ES6 中 的 一 个 新 特性 〈 而 且 很 
棒 )， 人 允许 使 用 多 行 字 符 串 。 使 用 反 引 号 定义 多 行 字 符 串 ， 可 以 让 我 们 更 轻松 地 把 模板 放 到 代码 
文件 中 。 





























你 真 的 应 该 把 模板 放 进 代码 文件 中 吗 ? 答案 是 : 视 情况 而 定 。 在 很 长 一 段 时 间 
里 , 大 家 都 觉得 最 好 把 代码 和 模板 分 开 。 这 对 于 一 些 开发 团队 来 说 确实 更 容易 ， 
不 过 在 某 些 项 目 中 会 增加 成 本 ， 因 为 你 将 不 得 不 在 一 大 堆 文 件 之 间 切 换 。 
个 人 观点 : 如 果 模 板 行 数 短 于 一 页 ， 我 更 倾向 于 把 模板 和 代码 放 在 一 起 ( 也 就 
是 .ts 文件 中 )。 这 样 就 能 同时 看 到 逻辑 和 视图 部 分 ， 同 时 也 便于 理解 它们 之 间 如 
何 互 动 。 

把 视图 和 代码 内 联 在 一 起 的 最 大 缺点 是 ， 很 多 编辑 器 仍然 不 支持 对 内 部 HTML 
字符 串 进行 语法 高 亮 。 我 们 期 待 能 尽快 看 到 有 更 多 编辑 器 支持 对 模板 字符 串 内 
说 HTML 的 语法 高 亮 。 
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1.3.6 FA styleUrls 添加 CSS 样式 


注意 styleurls 属 性 : 





styleUrls: ['./hello-world.component.css'] 

这 段 代 码 的 意思 是 ， 我 们 要 使 用 hello-world.component.css 文 件 中 的 CSS 作 为 该 组 件 的 样式 。 
Angular 使 用 一 项 叫 作 样式 封装 ( style-encapsulation ) 的 技术 ,， 它 意味 着 在 特定 组 件 中 指定 的 样式 
只 会 应 用 于 该 组 件 本 身 。14.1 节 会 深入 讨论 它 。 

目前 还 用 不 到 任何 “组 件 局 部 样式 ”， 你 只 要 先知 道 它 就 行 了 (或 整体 删除 此 属性 )。 





























ms 


你 可 能 注意 到 了 该 属性 与 template 有 个 不 同 点 : 它 接收 一 个 数组 型 参数 。 这 
因为 我 们 可 以 为 同一 个 组 件 加 载 多 个 样式 表 。 


1.3.7 ”加 载 组 件 

现在 ,我 们 已 经 写 完了 第 一 个 组 件 的 代码 ， 那 该 如 何 把 它 加 载 到 页 面 中 呢 ? 

如 果 再 次 在 浏览 器 中 访问 此 应 用 ， 我 们 会 看 到 一 切 照 日。 这 是 因为 我 们 仅仅 创建 了 该 组 件 ， 
但 还 没有 使 用 它 。 

为 了 解决 这 一 点 , 需要 把 该 组 件 的 标签 添加 到 一 个 将 要 泻 染 的 模板 中 去 。 打 开 文件 first_app/ 
angular2 hello world/src/app/app.component.html , 


记 住 ， 因 为 我 们 为 Hel loWorldComponent 配 置 了 app-hel 1o-wor1d 选 择 器 ， 所 以 要 在 模板 中 
4 Hj «app-hello-world»«/app-hello-world» 。 让 我 们 把 capp-hello-worldy 标签 添加 到 app. 


component.html'f 。 


















































code/first_app/angular2_hello_world/src/app/app.component.html 


«h1» 
{{title}} 


«app-hello-world»«/app-hello-world» 
«/h1» 


现在 ,刷新 该 页 面 就 会 看 到 如 图 1-4 所 示 结 
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@ OO Banguiar2tetioworid ng-book 


e c localhost:4200 x1 z 








app works! 


hello-world works! 








图 1-4 “Hello world” 一 切 正 常 


工作 正常 ! 


1.4 把 数据 添加 到 组 件 中 


现在 ， 该 组 件 泻 染 了 一 个 静态 模板 。 这 表示 我 们 的 组 件 还 不 够 有 趣 。 
设想 有 一 个 应 用 会 显示 一 个 用 户 列表 , 并 且 我 们 想 在 其 中 显示 用 户 的 名 字 。 在 泻 染 整个 列表 
之 前 ， 需 要 先 泻 染 一 个 单独 的 用 户 。 因 此 ， 我 们 来 创建 一 个 新 的 组 件 ， 它 将 显示 用 户 的 名 字 。 


再 次 使 用 ng generate 命 令 : 


























ng generate component user-item 

记 住 ， 想 看 到 我 们 创建 好 的 组 件 ， 就 要 把 它 添加 到 一 个 模板 中 。 

证 我 们 把 app-user-item 标 签 添加 到 app.componenthtml 中 ， 以 便 看 到 所 作 的 改动 。 把 
app.component.html 修 改 成 下 面 这 样 。 


code/first app/angular2 hello world/src/app/app.component.html 


«h1» 
{{title}} 


«app-hello-world»«/app-hello-world» 


«app-user-item»«/app-user-item» 
«/h1» 


然后 刷新 页 面 ， 并 确认 你 在 该 页 看 到 文本 user-item works! o 
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我 们 和 希望 userItemComponent 显示 一 个 指定 用 户 的 名 字 。 

因此 , 引入 name 并 声明 为 组 件 的 一 个 新 属性 。 有 了 name 属 性 , 我 们 就 能 在 不 同 的 用 户 之 间 复 
用 该 组 件 了 《〈 但 要 求 页 面 脚本 、 逮 辑 和 样式 相同 )。 

为 了 添加 名 字 , 我 们 要 在 UserItemComponent 类 上 引入 一 个 属性 , 来 声明 该 组 件 有 一 个 名 叫 
name 的 局 部 变量 。 


























code/first_app/angular2_hello_world/src/app/user-item/user-item.component.ts 


export class UserItemComponent implements OnInit { 
name: string; // <-- added name property 


constructor() { 
this.name = 'Felipe'; // set the name 


} 


ngOnInit() { 


， 我 们 改变 了 以 下 两 点 。 
1. name 属 性 


我 们 往 UserItemComponent 类 添加 了 一 个 属性 。 注意， 这 相对 于 ES5 JavaScript 来 说 是 个 新 语 
法 。 在 name:string; 中 ，name 是 我 们 想 设置 的 属性 名 ， 而 string 是 该 属性 的 类 型 


为 name 指 定 类 型 是 TypeScript 中 的 特性 ， 用 来 确保 它 的 值 必须 是 string。 这 些 代码 在 User- 
ItemComponent 类 的 实 甸 中 设置 了 一 个 名 为 name 的 属性 ， 并 且 编 译 吉 会 确保 name 是 一 个 string。 


2. 构造 函数 




































































TEUserltemComponent2É'p, 我们 定义 了 一 个 构造 函数 。 这 个 函数 会 在 创建 这 个 类 的 实例 时 
自动 调用 。 

在 我 们 的 构造 函数 中 ， 可 以 通过 this.name 来 设置 name 属 性 。 

如 果 这 样 写 : 


code/first_app/angular2_hello_world/src/app/user-item/user-item.component.ts 


constructor() { 
this.name = 'Felipe'; // set the name 


} 
就 表示 当 一 个 新 的 UserItemComponent 组 件 被 创建 时 ， 把 name 设 置 为 'Felipe'。 
e BERR 
填 好 这 个 值 之 后 ， 我 们 可 以 用 模板 语法 ( 也 就 是 双 花 括号 语法 {{ }} ) 在 模板 中 显示 该 变量 

















‘ail 
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的 值 。 





code/first_app/angular2_hello_world/src/app/user-item/user-item.component.html 
<p> 

Hello {{ name }} 
</p> 


注意 , 我 们 在 template 中 引入 了 一 个 新 的 语法 : {{ name }}。 这 些 括号 叫 作 “模板 标签 ”( 也 
叫 “ 小 胡子 标签 ”)。 模板 标签 中 间 的 任何 东西 都 会 被 当 作 一 个 表达 式 来 展开 。 这 里 , 因为 template 
是 绑 定 到 组 件 上 的 ， 所 以 name 将 会 被 展开 为 this.name 的 值 ， 也 就 是 'Felipe '。 


3. 试 试看 
进行 这 些 修 改 之 后 ， 重 新 加 载 页 面 ， 页 面 上 应 该 显示 Hello Felipe， 如 图 1-5 所 示 。 

















x | ng-book 





app works! 
hello-world works! 


Hello Felipe 








图 1-5” 带 有 数据 的 应 用 


1.5 ”使 用 数组 


现在 ， 我 们 可 以 对 一 个 单独 的 名 字 问 好 了 ， 但 是 如 果 想 对 一 组 名 字 问 好 呢 ? 


如 果 你 以 前 用 过 AngularJS ， 那 么 可 能 用 过 ng-repeat 指 令 。 在 Angular 中 ，NgFor 是 类 似 的 指 
S (我 们 在 模板 标记 中 通过 xngFor 语 法 来 使 用 它 ， 稍 后 会 讲 到 )。 它 们 在 语法 上 略 有 不 同 ， 但 作 
用 是 一 样 的 : 为 一 组 对 象 反 复 泻 染 同样 的 页 面 脚本 。 

下 面 创 建 一 个 会 泻 染 用 户 列表 的 新 组 件 。 我 们 还 是 从 生成 一 个 新 组 件 开始 : 


ng generate component user-list 
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接着 ， 把 app.component.html 文 从 





«h1» 


code/first app/angular2 hello world/src/app/app.component.html 
{{title}} 





F 中 的 «app-user-item» 替换 为 capp-user-1 ist>o 


«app-hello-world»«/app-hello-world» 
«app-user-list»«/app-user-list» 
«/h1» 















































就 像 给 UserItemComponent 添 加 了 name 属 
属性 。 
不 过 , 不 再 设置 该 属性 只 
型 后 面 紧 跟 一 对 方 括号 [] 


性 一 样 ， 我 们 也 给 UserLi stComponent 添加 names 
只 存储 一 个 字符 串 ， 而 是 存储 一 个 字符 
， 如 下 所 示 。 
code/first_app/angular2_hello_world/src/app/user-list/user-list.component.ts 
names: string[]; 





事 数 组 。 数 组 的 语法 就 是 
export class UserListComponent implements OnInit { 
constructor() { 


在 类 
this.names = ['Ari', 'Carlos', 'Felipe', 'Nate']; 
j 
ngOnInit() ( 
j 
j 
要 留意 的 第 





处 变化 是 在 UserListComponent 类 中 添加 了 一 个 新 的 string[] 属 性 。 这 种 语法 
表示 names 的 类 型 是 string 构 成 的 数组 。 它 的 男 一 种 写法 是 Array<string>。 
我 们 还 修改 了 构造 函数 ， 让 它 将 this .names 的 值 设置 为 ['Ari',，'Carlos',，'Felipe', 
'Nate']。 


<ul> 


现在 就 可 以 更 新 模板 , 泻 染 出 这 个 名 字 列 表 了 。 这 时 我 们 要 有 
进行 迭代 ， 为 列表 中 的 每 一 个 条 目 生 成 一 个 新 标 


JE x 





Ao A 





崩 到 *ngFor ， 它 会 在 一 个 列表 上 
所 模板 如 下 所 示 。 
code/first_app/angular2_hello_world/src/app/user-list/user-list.component.html 
</ul> 


«li *ngFor="let name of names">Hello {{ name }}</li> 


字符 和 1let 语 法 可 能 会 


能 会 让 
的 循环 


我 们 用 一 个 ul 和 一 个 添加 了 #xngFor="1let name of names" 属 性 的 1i 元 素来 更 新 模板 。 这 个 x 
你 摸 不 着 头脑 ， 我 们 把 它们 拆 开 来 解 和 

*ngFor 语 法 是 说 我 们 想 在 这 个 属性 上 使 用 NgFor 指 令 。 你 可 以 
， 其 
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NgFor 理 解 成 一 个 类 似 于 for 
f 建 一 个 DOM 元 素 。 
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它 的 值 是 "let name of names" 。names 是 我 们 在 Hel lowor1d 对 象 中 定义 的 名 字数 组 。1let NN 
namelllJE 7] JH, "let name of names" 的 意思 是 ,循环 处 理 names 中 的 每 一 个 元 素 并 将 其 逐个 赋 
值 给 一 个 名 叫 name 的 局 部 变量 。 

NgFor 指 令 将 为 数组 names 中 的 每 一 个 条 目 都 演 染 出 一 个 1i 标 签 ， 并 声明 一 个 本 地 变量 name 
来 持 有 当前 迭代 的 条 目 。 然 后 ， 这 个 新 变量 将 被 插值 到 Hel1lo {{ name }} 代 码 片段 里 。 








^ 并 不 是 必须 把 这 个 引用 变量 命名 为 name。 我 们 也 可 以 这 样 写 : 
«li *ngFor="let foobar of names">Hello {{ foobar }}</li> 
但 把 顺序 反 过 来 行 吗 ? 来 个 小 测验 吧 ! 如 果 写 成 下 面 这 样 会 如 何 ? 
«li *ngFor="let name of foobar">Hello {{ name }}</li> 


当然 会 出 错 ! 因为 foobar 并 不 是 该 组 件 上 的 属性 。 


Q、 NgFor 会 重复 泻 染 ngFor 所 在 的 元 素 。 也 就 是 说 ， 我 们 应 该 把 它 放 到 1i 标 签 上 而 
不 是 ul 标签 上 ， 因 为 我 们 希望 重复 的 是 列表 元 素 (11) 而 非 列表 本 身 (u1)。 


e» 如 果 你 想 进一步 探索 ,可 以 直接 阅读 Angular 源 代码 来 学 习 Angular 核 心 团队 是 如 
何 编写 组 件 的 。 上 比如， 你 能 在 https://github.com/angular/angular/blob/master/ 
modules/%40angular/common/src/directives/ng for.ts 找 到 NgFor 指 令 的 源 代码 。 


现在 刷新 页 面 ， 就 会 看 到 此 数组 中 的 每 个 字符 串 都 有 了 对 应 的 1i ， 如 图 1-6 所 示 。 


@ 0 9 图 Anouar2heloword x E 
« Œ | (5 locathost:4200 ^. 


m H 





app works! 
hello-world works! 


* Hello Ari 

e Hello Carlos 
* Hello Felipe 
* Hello Nate 





1-6 ” 带 有 数据 的 应 用 
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1.6 {FA UserItemComponent 组 件 


还 记得 以 前 我 们 创建 过 UserItemComponent 吗 ?这 次 不 会 在 UserListComponent 中 直接 演 梁 
每 个 名 字 了 了， 而 是 改 用 UserItemComponent 作 为 子 组 件 。 也 就 是 说 ,我 们 不 再 直接 重复 演 染 1i 标 
a, 而 是 让 userItemComponent 来 为 列表 中 的 每 个 条 目 指定 模板 ( 和 功能 )。 


我 们 需要 做 三 件 事 来 实现 这 一 点 。 

(1) 配置 UserListComponent 来 (在 它 的 模板 中 ) 泻 染 UserItemComponent 。 
(2) 配置 UserItemComponent 来 接收 name 变 量 作为 输入 。 

(3) 配置 UserListComponent 的 模板 来 把 用 户 名 传 给 UserItemComponent。 
让 我 们 来 逐一 完成 。 













































































1.6.1 泻 染 UserItemComponent 


UserItemComponent 指 定 了 选择 器 app-user-item， 接 下 来 要 把 这 个 标签 添加 到 模板 中 。 我 
们 要 做 的 就 是 把 1i 标 签 替 换 为 app-user-item 标 签 。 


code/first_app/angular2_hello_world/src/app/user-list/user-list.component.html 


<ul> 
«app-user-item 
angFor="let name of names"» 
«/app-user-item» 
«/ul» 


注意 ， 当 把 1i 标 签 蔡 换 为 app-user-iten 上 时， 我 们 保留 了 ngFor 属 性 。 这 是 因为 我 们 仍然 要 
在 用 户 名 列表 上 进行 循环 。 


注意 ， 我 们 还 移 除了 该 模板 内 部 的 内 容 ， 因 为 UserItemComponent 组 件 有 自己 的 模板 。 如 果 
刷新 浏览 器 ， 看 到 的 结果 如 网 1-7 所 示 。 


它 确实 重复 了 ， 但 有 些 不 大 对 劲 
YF AT. 


谢 天 谢 地 ，Angular 为 此 提供 了 一 种 方式 : @Input 注 解 。 







































































每 个 用 户 名 都 是 Felipe! 我 们 需要 某 种 方式 来 把 数据 传 
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@ OO Banguiar2rieiioworia x ng-book 
e Œ | [5 localhost:4200 








app works! 

hello-world works! 
Hello Felipe 
Hello Felipe 
Hello Felipe 


Hello Felipe 








图 1-7 带 有 数据 的 应 用 


1.6.2 ”接收 输入 


还 记得 吗 ? UserItemComponent 已 经 在 其 构造 函数 中 设置 了 this.name = 'Felipe';。 现 在 ， 
我 们 需要 进行 一 些 改动 ， 让 组 件 的 name 属 性 从 外 部 接收 值 。 


这 里 要 把 userItemComponent 修 改 为 : 

















code/first app/angular2 hello world/src/app/user-item/user-item.component.ts 
import { 

Component, 

OnInit, 

Input // <--- added this 
} from 'Gangular/core'; 


GComponent ( f 
selector: 'app-user-item', 
templateUrl: './user-item.component.html', 


styleUrls: ['./user-item.component.css'] 

}) 

export class UserItemComponent implements OnInit { 
@Input() name: string; // «-- added Input annotation 


constructor() { 
// removed setting name 


} 


ngOnInit() { 
} 
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注意 ,我 们 修改 了 name 属 性 , 使 其 具有 一 个 eInput 注 解 。 在 第 3 章 中 ,我 们 会 讨论 更 多 关于 Input 
( 和 output ) 的 知识 ， 但 目前 你 只 要 知道 该 语法 能 让 我 们 从 父 模板 中 传 进来 一 个 值 就 可 以 了 。 


为 了 使 用 Input ， 我 们 还 得 把 它 添加 到 import 的 列表 中 去 。 
最 后 ， 我 们 不 希望 为 name 设 置 默认 值 ， 因 此 从 构造 函数 中 移 除 它 。 
现在 我 们 有 了 一 个 名 叫 name 的 Input ， 那 么 该 如 何 使 用 它 呢 ? 


— 














1.6(3 传 入 Input 值 
为 了 把 一 个 值 传人 人 组件， 就 要 在 模板 中 使 用 方 括号 [] 语 法 。 来 看 看 修改 过 的 模板 。 











code/first_app/angular2_hello_world/src/app/user-list/user-list.component.html 


<ul> 
«app-user-item 
*xngFor-"let name of names" 
[name]2"name"» 
«/app-user-item» 
«/ul» 


注意 , 我 们 在 app-user-item 标 签 上 添加 了 新 属性 [name]="name" 。 在 Angular 中 ， 添 加 一 个 
带 方 括号 的 属性 ( 比如 [foo] ) 意味 着 把 一 个 值 传 给 该 组 件 上 同名 的 输入 属性 〈 比如 foo )。 
在 这 个 例子 中 ， name #7 {ll {EK A ngFor Filet name . . .语句 。 也 就 是 说 ， 对 于 下 列 代 码 : 
«app-user-item 
angFor="let individualUserName of names" 


[name]z"individualUserName"» 
«/app-user-item» 


[name] 部 分 指定 的 是 userItemCcomponent 上 的 Input。 注 意 , 我 们 正在 传人 的 并 不 是 字符 串 字 
面 量 "individualUserName" ， 而 是 individualUserName 变 量 的 值 ， 也 就 是 names 中 的 每 个 元 素 。 


在 第 3 章 中 ， 我 们 会 详细 讲解 输入 属性 和 输出 属性 。 现 在 ， 你 所 要 知道 的 是 : 
(1) 在 names 中 迭代 ; 

(2) 为 names 中 的 每 个 元 素 创 建 一 个 新 的 userItemComponent ; 

(3) 把 当前 名 字 的 值 传 给 userItemComponent 上 名 叫 name 的 Input 属 性 。 
现在 ， 泻 染 名 字 列 表 的 工作 就 完成 了 ( 如 图 1-8 所 示 )! 

ASS! 你 已 经 用 组 件 构建 出 了 你 的 第 一 个 Angular 应 用 。 


当然 ， 该 应 用 非常 简单 ， 你 应 该 还 希望 构建 更 复杂 的 应 用 。 别 急 ， 在 本 书 中 , 我 们 将 带 你 成 
为 编写 Angular 应 用 的 专家 。 事实 上 , 我 们 在 本 章 中 还 会 构建 一 个 投票 应 用 ( 就 像 Reddit 或 Product 
Hunt )。 该 应 用 具有 用 户 交 互 特性 以 及 更 多 的 组 件 。 
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ng-book | 





€ Œ D localhost:4200 x = 





app works! 
hello-world works! 
Hello Ari 
Hello Carlos 
Hello Felipe 


Hello Nate 








图 1-8 ”应 用 中 的 名 字 一 切 正 常 
在 开始 构建 新 的 应 用 之 前 ， 先 来 仔细 看 看 Angular 应 用 是 如 何 启 动 的 。 


17 "Ru EEBAXE 


应 用 都 有 一 个 主人 口 点 。 该 应 用 是 由 angular-cli 构 建 的 ， 而 angular-cli 则 是 基于 一 
Pere ipd 你 不 必 理 解 webpack 就 能 使 用 Angular， 但 理解 应 用 的 启动 流程 是 很 有 帮 
助 的 。 


我 们 可 以 通过 运行 下 列 命令 来 启动 应 用 : 
ng serve 


ng 会 查阅 angular-clijson 文 件 来 找 出 该 应 用 的 人口 点 。 我 们 来 跟踪 一 下 ng 是 如 何 找到 我 们 刚 
刚 构 建 的 组 件 的 。 
大 体 来 说 ， 过 程 如 下 所 示 : 
口 angular-cli.json 指 定 一 个 "main" 文 件 ， 这 里 是 main.ts; 
O main.ts 是 应 用 的 入 口 点 ， 并 且 会 引导 (bootstrap ) 我 们 的 应 用 
口 引导 过 程 会 引导 一 个 Angular 模 块 一 一 我 们 尚未 讨论 过 模块 ， 不 过 很 快 就 会 谈 到 ; 
a 我 们 使 用 AppModule 来 引导 该 应 用 ， 它 是 在 src/app/app.module.ts 中 指定 的 ; 
口 AppModule 指 定 了 将 哪个 组 件 用 作 顶 层 组 件 ， 这 里 是 AppComponent; 
口 AppComponent 的 模板 中 有 一 个 capp-user-1ist> 标 签 ， 它 会 演 染 出 我 们 的 用 户 列表 。 
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我 们 将 在 稍 后 深入 讨论 这 个 过 程 ， 现 在 把 目光 聚焦 在 Angular 的 模块 系统 上 : NgModule。 


Angular 有 一 个 强大 的 概念 : 模块 。 当 引导 一 个 Angular 应 用 时 ， 并 不 是 直接 引导 一 个 组 件 ， 
而 是 创建 了 一 个 NgModule ， 它 指向 了 你 要 加 载 的 组 件 。 


我 们 来 看 看 代码 。 


code/first_app/angular2_hello_world/src/app/app.module.ts 


@NgModule( { 
declarations: [ 
AppComponent, 
HelloWorldComponent, 
UserltemComponent, 
UserListComponent 





























l, 
imports: [ 
BrowserModule, 
FormsModule, 
HttpModule 
], 
providers: [], 
bootstrap: [AppComponent] 
}) 
export class AppModule { } 
我 们 首先 看 到 的 是 eNgModule 注 解 。 像 所 有 注解 一 样 ， 这 段 eNgModule( ... ) 代 码 为 紧 随 其 
后 的 AppModule 类 添加 了 元 数据 。 


@NgModule 注 解 有 三 个 属性 : declarations 、imports 和 bootstrap。 


declarations 指 定 了 在 该 模块 中 定义 的 组 件 。 你 可 能 已 经 注意 到 了 , 当 我 们 使 用 ng generate 
时 ， 它 会 自动 把 生成 的 组 件 添 加 到 这 个 列表 里 ! 这 涉及 Angular 中 的 一 个 重要 思想 : 


要 想 在 模板 中 使 用 一 个 组 件 ， 你 必须 首先 在 NgModule 中 声明 它 。 
imports 描述 了 该 模块 有 哪些 依赖 。 我 们 正在 创建 一 个 浏览 器 应 用 ， 因 此 要 导入 


BrowserModule。 






































bootstrap 告 诉 Angular, 当 使 用 该 模块 引导 应 用 时 ,我 们 要 把 AppComponent 加 载 为 顶层 组 件 。 


Q, 我 们 将 在 8.10 节 中 深入 讨论 NgModule。 


1.8 扩展 你 的 应 用 


现在 我 们 学 会 了 如 何 创建 一 个 基本 的 应 用 , 下 面 就 开始 仿造 一 个 Reddit 吧 。 在 开始 编程 之 前 ， 
你 最 好 先 对 此 应 用 进行 概览 并 把 它 拆 解 为 一 些 逻 辑 组 件 ， 如 图 1-9 所 示 。 
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€ > Q [D locathost:8080 


retook? Angular 2 Simple Reddit 


Adda Link 
Title: 


iPad Game for Cats 


Link: 
| http://ipadgameforcats.com| 


Angular 2 


(angular.io) 
^ upvote  downvote 
Fullstack 
(fullstack.io) 
个 upvote wẹ downvote 
Angular Homepage 
(angular.io) 


个 upvote  downvote 














图 1-9 应 用 的 逻辑 组 件 

















我 们 将 在 这 个 应 用 程序 中 构造 两 个 组 件 : 
(1) 整体 应 用 程序 ， 包 含 一 个 用 来 提交 新 文章 的 表单 ( 在 图 1-9 中 标示 为 深 灰 色 方 框 ); 








(2) 每 个 文章 ( 在 图 1-9 中 标示 为 浅 灰色 方 框 )。 


在 较 大 的 应 用 程序 中 , 用 来 提交 文章 的 表单 本 身 也 应 该 设计 成 单独 的 组 件 , 但 是 
这 会 让 数据 传送 变 得 更 加 复杂 。 因 此 为 了 简化 ， 在 本 章 中 我 们 只 使 用 两 个 组 件 。 
我 们 目前 只 创建 两 个 组 件 ， 但 在 本 书后 面 的 章节 中 ， 我 们 将 学 习 如 何 处 理 更 复 


杂 的 数据 架构 。 
首先 ， 像 以 前 一 样 运行 ng new 命 令 ， 并 传人 一 个 想 要 的 名 字 来 生成 新 的 应 用 (这 里 我 们 将 创 





建 一 个 名 叫 angular2 reddit 的 应 用 ): 


ng new angular2_reddit 
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e 


我 们 在 可 下 载 的 示例 代码 中 提供 了 angular2_reddit 的 完整 版 。 


1.8.1 添加 CSS 
我 们 要 做 的 第 一 件 事 是 添加 一 些 CSS 样 式 ， 来 让 应 用 不 再 完全 “素颜 ”。 


@ 











如 果 你 正在 从 头 构建 应 用 ， 可 以 从 完成 版 示例 代码 的 first_app/angular2_reddit 目 
录 下 复制 一 些 文件 过 来 。 

复制 以 下 文件 到 你 的 应 用 目录 下 : 

e src/index.html 

e src/styles.css 

e src/app/vendor 

e src/assets/images 

在 本 项 目 中 , 我 们 将 使 用 Semantic-UT 来 帮助 添加 样式 。Semantic-UI 是 一 个 CSS 
框架 ， 类 似 于 Zurb Foundation? A Twitter Bootstrap”。 我 们 的 示例 代码 中 已 经 包 
含 了 它 ， 所 以 你 只 需要 复制 上 面 指定 的 文件 即 可 。 


1.8.2 ”应 用 程序 组 件 
现在 来 构建 一 个 新 的 组 件 ， 它 将 : 
(1) 存储 我 们 的 当前 文章 列表 ; 
(2) 包含 一 个 表单 ， 用 来 提交 新 的 文章 。 
我 们 可 以 在 src/app/app.component.ts 文 件 中 找到 主 应 用 组 件 。 打 开 它 ， 可 以 看 到 与 以 前 一 样 


的 初始 内 容 。 








code/first_app/angular2_reddit/src/app/app.component.ts 


import { Component } from 'Gangular/core'; 


@Component ( { 


}) 





selector: 'app-root', 
templateUrl: './app.component.html', 
styleUrls: ['./app.component.css' ] 


export class AppComponent { 





® http://semantic-ui.com/ 
© http://foundation.zurb.com 
@) http://getbootstrap.com 
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title = ‘app works!'; 
} 


我 们 对 此 模板 稍 作 修 改 ， 使 其 包含 一 个 表单 ， 用 于 添加 链接 。 我 们 将 从 semantic-ui 包 中 借 
用 一 点 样式 来 让 这 个 表单 看 起 来 更 漂亮 一 些 。 
code/first_app/angular2_reddit/src/app/app.component.html 


<form class="ui large form segment"> 
«h3 class="ui header">Add a Link</h3> 








<div class="field"> 
«label for="title">Title:</label> 
«input name="title"> 

</div> 

«div class="field"> 
«label for="link">Link: </label> 
«input name="link"> 

</div> 

</form> 


我 们 要 创建 一 个 template， 它 定义 了 两 个 input 标 签 : 一 个 用 于 文章 的 标题 (title), 5S— 
个 用 于 文章 的 链接 (link URL), 


刷新 浏览 器 后 ， 你 就 会 看 到 泻 染 出 了 如 图 1-10 所 示 的 表单 。 


© Panguiarrredsit 








€ > C D) localhost:4200 * 


| retook? Angular 2 Simple Reddit 





Adda Link 


Title: 


Link: 


图 1-10 表单 
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1.8.8 ”添加 互动 


现在 我 们 有 了 带 input 标 签 的 表单 ， 但 还 没有 任何 方式 来 提交 数据 。 下 面 在 表单 中 添加 一 个 
提交 按钮 ， 来 添加 一 些 交 互 。 

当 提交 该 表单 时 ， 我 们 和 希望 调用 一 个 函数 来 创建 并 添加 一 个 链接 。 可 以 往 cbutton /> 元 素 
上 添加 一 个 交互 事件 来 实现 这 个 功能 。 


把 事件 的 名 字 包 囊 在 圆 括号 ( ) 中 就 可 以 告诉 Angular: 我 们 要 响应 
加 一 个 函数 来 响应 cbutton /的 onclick 事 件 ， 可 以 像 这 样 把 它 传 进 去 : 


<button (click)="addArticle()" 
class-"ui positive right floated button"> 
Submit link 
</button> 


这 样 , 当 点 击 这 个 按钮 时 , 就 会 调用 一 个 名 叫 addArticle() 的 函数 ; 我 们 要 在 AppComponent 
类 中 定义 这 个 函数 。 代 码 如 下 所 示 。 


code/first_app/angular2_reddit/src/app/app.component.ts 























k 


个 事件 。 比 如 ， 要 想 添 








export class AppComponent { 
addArticle(title: HTMLInputElement, link: HTMLInputElement): boolean { 
console.log(^Adding article title: ${title.value} and link: $[link.value]^); 
return false; 
} 
} 


— HBaddArticle() 函数 添加 到 AppComponent 中 并 且 把 (click) 事 件 处 理 器 添加 到 <button 
/元 素 上 ， 那 么 每 当 点 击 此 按钮 时 ， 就 会 调用 该 函数 。 注 意 ，addArticle( ) 函数 可 以 接收 两 个 
参数 : title 和 1ink。 我 们 还 要 修改 模板 来 把 它们 传 给 addArticle( )。 

我 们 可 以 通过 为 表单 中 的 input 元 素 添加 一 个 特殊 的 语法 来 取得 模板 变量 。 修 改 后 的 模板 如 
下 所 示 。 


code/first_app/angular2_reddit/src/app/app.component.html 




















<form class="ui large form segment"> 
<h3 class="ui header">Add a Link</h3> 


«div class="field"> 

«label for="title">Title:</label> 

«input name="title" snewtitle» «!-- changed --» 
«/div» 
«div class="field"> 

«label forz"link"»Link:«/label» 

«input name="link" #newlink> «!-- changed --» 
«/div» 


<!-- added this button --» 
«button (click)="addArticle(newtitle, newlink)" 
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class-"ui positive right floated button"> 
Submit link 
</button> 


</form> 


注意 ， 我 们 在 input 标 签 上 使 用 了 # (hash ) 来 要 求 Angular 把 该 元 素 赋 值 给 一 个 局 部 变量 。 
通过 把 #title 和 #1ink 添 加 到 适当 的 cinput /> 元 素 上 ， 就 可 以 把 它们 作为 变量 传 给 按钮 上 的 
addArticle() 函数 ! 


总 结 一 下 ， 我 们 一 共 进 行 了 四 项 修改 : 

(1) 在 模版 中 创建 了 一 个 button 标 签 ， 向 用 户 表明 应 该 点 击 哪里 ; 

(2) 新 建 了 一 个 名 叫 adqdqArticle 的 函数 ,来 定义 按钮 被 点 击 时 要 做 的 事情 ; 

(3) 在 button 上 添加 了 一 个 (click) 属 性 , 意思 是 “只 要 点 击 了 这 个 按钮 , 就 运行 addArticle 
函数 ”; 

(4) 在 两 个 cinput> 标 签 上 分 别 添加 了 #newtitle 和 #newlink 属 性 。 

下 面 我 们 按照 倒序 讲解 每 一 步 。 

1. 绑 定 input 的 值 

注意 ， 第 一 个 输入 标签 是 这 样 的 : 


<input name="title" #newtitle> 


















































这 上 段 标记 告诉 Angular 把 这 个 cinputy> 绑 定 到 变量 newtitle 上 。#newtitle 语 法 被 称 作 一 个 解 
析 (resolve )， 其 效果 是 让 变量 newtitle 可 用 于 该 视图 的 所 有 表达 式 中 。 


newtitle 现 在 是 一 个 对 象 ， 它 代表 了 这 个 input DOM 元 素 (更 确切 地 说 ， 它 的 类 型 是 
HTMLInputElement )。 由 于 newtitle 是 一 个 对 象 ， 我 们 可 以 通过 newtitle.value 表 达 式 来 获取 
这 个 输入 框 的 值 。 


同样 ， 我 们 把 tnewl ink 添 加 到 了 另 一 个 cinput> 标 签 上 ， 因 此 也 可 以 用 它 来 提取 这 个 输入 相 
的 值 。 


2. 把 事件 绑 定 到 动作 


我 们 在 button 标 签 上 添加 了 属性 (click) 来 定义 点 击 此 按钮 时 应 该 怎么 做 。 当 发 生 (click) 
事件 时 ,我们 会 调用 addArticle 并 传人 两 个 参数 : newtitle 和 newlink。 这 个 函数 和 这 两 个 参数 
是 从 哪里 来 的 ? 


(1) addqArticle 是 组 件 定 义 类 AppComponent 里 的 一 个 函数 。 


(2) newtitle 来 自 名 叫 title 的 cinput> 标 签 上 的 解析 (#newtitle )。 


























TA] 
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(3) newlink 来 自 名 叫 1ink 的 <input> 标 签 上 的 解析 (#newlink )。 
全 部 合并 起 来 是 这 样 的 : 


<button (click)="addArticle(newtitle, newlink)" 
class="ui positive right floated button"> 
Submit link 
</button> 








class-"ui positive right floated button" 4&4 A Semantic UI， 它 为 这 
个 按钮 提供 了 赏心悦目 的 绿色 。 


3. 定义 操作 逻辑 
在 class AppComponent 中 ， 我 们 定义 了 一 个 名 叫 addqArticle 的 新 函数 。 它 接收 两 个 参数 : 
title 和 1link。 要 注意 ,title 和 1link 都 是 HTMLInputElement 类 型 的 对 象 ， 而 并 非 直接 输入 的 值 ; 


这 一 点 很 重要 。 要 从 input 中 获取 值 ， 就 得 调用 title.value。 目 前 , 我 们 通过 console. 1og 来 输 
出 这 些 参数 。 


























code/first_app/angular2_reddit/src/app/app.component.ts 


addArticle(title: HTMLInputElement, link: HTMLInputElement): boolean { 
console.log(^Adding article title: ${title.value} and link: $[link.value]^); 
return false; 


} 


Q, 注意 ， 我 们 又 在 使 用 反 引 号 字符 事 了 。 这 是 ES6 中 非常 便利 的 一 个 特性 : 反 引 
号 字符 串 会 展开 模板 变量 ! 
这 里 ,我 们 把 $ftitle.value} 放 在 了 字符 囊 中 , 它 最 终 会 被 替换 成 itle.value 
的 值 。 


4. 试 试看 
现在 ， 当 你 点 击 提交 按钮 时 ， 就 能 看 到 这 条 消息 被 打印 到 控制 台中 了 如 图 1-11 所 示 )。 
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@ OO / Panguiar2- simple Reddit x | Nate | 
> Œ fi D localhost:8080 HOr 
A H 1 
ngbook2 Angular 2 Simple Reddit 
Adda Link 
Title: 
Ng Newsletter 
Link: 
http://ng-newsletter.com| 
‘Submit link 
R 0 Elements Console Sources Network Timeline Profiles Resources Audits i x 
© Y <top frame> v M) Preserve log 
Adding article with title: NG Newsletter and link: http://ng-newsletter.com app.ts:129 
> 








Í ————————— 
图 1-11 点 击 按钮 


1.8.4 添加 文章 组 件 


现在 , 我 们 有 了 一 个 用 来 提交 新 文章 的 表单 ,但 还 没有 在 任何 地 方 展示 这 些 新 文章 。 因 为 每 
篇 新 提交 的 文章 都 要 显示 在 本 页 面 的 列表 中 ， 现 在 要 新 建 一 个 组 件 。 


下 面 就 来 新 建 一 个 组 件 ， 用 来 单独 展示 这 些 提交 过 的 文章 ( 如 图 1-12 所 示 )。 


Angular 2 


3 (angular.io) 


POINTS 
个 upvote wẹ downvote 


图 1-12 一 篇 文章 
为 此 ， 我 们 借助 ng 工具 生成 一 个 新 组 件 : 


ng generate component article 
定义 这 个 新 组 件 总 共用 到 了 三 部 分 代码 : 
(1) 在 模板 中 定义 了 ArticleComponent 的 视图 ; 
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(2) 通过 为 类 加 上 e@component 注 解 定 义 了 ArticleCcomponent 组 件 的 元 数据 ; 
(3) 定义 了 一 个 组 件 定 义 类 (ArticleComponent )， 其 中 是 组 件 本 身 的 逻辑 。 
下 面 来 深入 讲解 一 下 各 部 分 的 细节 。 

1. 创建 ArticleComponent 的 template 


我 们 使 用 文件 article.component.html 定 义 模板 。 





code/first app/angular2 reddit/src/app/article/article.component.html 


«div class="four wide column center aligned votes"» 
«div class="ui statistic"» 
«div class="value"> 
{{ votes 1] 
«/div» 
«div class="label"> 
Points 
«/div» 
«/div» 
«/div» 
«div class="twelve wide column"» 
«a class-"ui large header" href="{{ link }}"> 
{{ title }} 
</a> 
<ul class="ui big horizontal list voters"> 
«li class="item"> 
<a href (click)="voteUp()"> 
«i class-"arrow up icon"»«/i» 
upvote 
«/a» 
«/li» 
«li class-"item"» 
<a href (click)="voteDown()"> 
<i class-"arrow down icon"»«/i» 
downvote 
«/a» 
«/li» 
«/ul» 
«/div» 


这 里 有 很 多 页 面 脚本 ,我们 来 分 解 一 下 ( 如 图 1-13 所 示 )。 


Angular 2 


3 (angular.io 


POINTS 
个 Upvote YY downvote 


图 1-13 ”单行 文章 
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我 们 有 两 列 : ET 


(1) 左 侧 是 投票 的 数量 ; 
(2) 右 侧 是 文章 的 信息 。 


我 们 分 别 用 four wide column 和 twelve wide column 这 两 个 CSS 类 来 指定 这 两 列 。( 记 住 ， 
它们 来 自 Semantic UI 的 CSS 库 。) 

















我 们 用 模板 展开 字符 串 {{ votes }} 和 {{ title }} 来 展示 votes 和 title。 这 些 值 来 自 
ArticleComponent 类 中 的 votes 和 title 属 性 ， 我 们 很 快 就 会 进行 定义 。 

注意 ,我 们 可 以 在 属性 值 中 使 用 模板 字符 串 , 比如 在 a 标签 的 href 属性 中 :href="{{ link }}"。 
在 这 种 情况 下 ，href 的 值 会 根据 组 件 类 的 1ink 属 性 的 值 进行 动态 插值 计算 得 出 。 

在 upvote 和 downvote 的 链接 上 ， 我 们 还 有 一 个 动作 。 只 要 分 别 将 其 按钮 上 的 (click) 绑 定 到 


voteUp( ) 和 voteDown( ) 就 可 以 了 。 当 upvote 按 钮 被 按 下 时 ，ArticleComponent 类 上 的 voteUp() 
函数 就 会 被 调用 ; 当 downvote 按 钮 被 按 下 时 ，voteDown( ) PRAMS IAA o 




















2. 创建 ArticleComponent 
接 下 来 创建 ArticleComponent。 





code/first app/angular2 reddit/src/app/article/article.component.ts 


GComponent ( f 
selector: 'app-article', 
templateUrl: './article.component.html', 
styleUrls: ['./article.component.css'], 
host: { 
class: 'row' 
j 


}) 


首先 , 我 们 用 ecomponent 定 义 了 一 个 新 组 件 。selector 表 示 会 用 capp-articley 标 签 将 该 组 
件 放 在 页 面 中 (也 就 是 说 ， 该 选择 器 是 一 个 标签 名 )。 


因此 ， 该 组 件 最 基本 的 使 用 方式 就 是 把 下 列 标签 放 在 我 们 的 页 面 脚本 中 : 


«app-article» 
«/app-article» 


当 页 面 被 泻 染 出 来 时 ， 这 些 标 签 仍然 会 留 在 视图 中 。 


我 们 希望 每 个 app-article 都 独占 一 行 。 我 们 使 用 的 是 Semantic UI， 它 提供 了 一 个 用 来 表示 
行 的 CSS 类 ”， 叫 作 row。 


在 Angular 中 ， 组 件 的 宿主 就 是 该 组 件 所 附着 到 的 元 素 。 你 会 注意 到 ， 我 们 在 ecomponent 中 




















(D http://semantic-ui.com/collections/grid.html 
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传人 了 一 个 选项 : host: ( class: 'row' }。 它 告诉 Angular: 我 们 要 在 宿主 元 素 (app-article 


标签 ) 上 设置 class 属 











盟 性 ， 使 其 具有 row 类 。 


Q; 六 这 个 host 选 项 很 不 错 ， 它 意味 着 我 们 可 以 把 app-article 的 页 面 脚本 封装 在 组 


件 之 内 。 


也 就 是 说 ， 我 们 不 必 在 使 用 app-article 标 签 的 同时 要 求 父 视图 中 的 


页 面 脚本 具有 class="row" 属性。 借助 host 选 项 ， 我 们 就 可 以 在 组 件 的 内 部 配 
置 宿 主 元 素 了 。 


3. 创建 组 件 定义 类 ArticleComponent 
最 后 ， 我 们 来 创建 组 件 定义 类 ArticleComponent。 





code/first_app/angular2_reddit/src/app/article/article.component.ts 


export class ArticleComponent implements OnInit { 
votes: number; 
title: string; 


link: string; 


constructor () 


{ 


this.title = ‘Angular 2'; 


this.link = 


'http://angular.io'; 


this.votes - 10; 


} 


voteUp() { 


this.votes += 1; 


} 


voteDown() { 


this.votes -= 1; 


} 


ngOnInit() { 


} 


, 


1 


此 处 我 们 在 ArticleComponent 上 创建 了 以 下 三 个 属性 。 

(1) votes: 一 个 数字 ， 用 来 表示 所 有 “ 赞 ” 减 去 所 有 “ 踩 ” 的 数量 之 和 。 
(D) title: 一 个 字符 串 ， 用 来 存放 文章 的 标题 。 

(3) link: 一 个 字符 串 ， 用 来 存放 文章 的 URL。 

在 constructor() 中 ， 我 们 设置 了 一 些 默 认 属 性 。 














Al 
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code/first app/angular2 reddit/src/app/article/article.component.ts 
constructor() { 
this.title - 'Angular 2'; 
this.link = 'http://angular.io'; 
this.votes - 10; 
j 


我 们 还 为 投票 定义 了 两 个 函数 ， 一 个 用 来 “ 赞 ” 的 voteUp 和 一 个 用 来 “ 踩 ” 的 voteDown。 





code/first app/angular2 reddit/src/app/article/article.component.ts 


voteUp() { 
this.votes += 1; 

j 

voteDown() { 
this.votes -= 1; 

j 














在 voteUp 中 ， 我 们 会 把 this .votes 加 一 ; 而 在 voteDown 中 ， 则 会 把 this .votes 减 一 。 

4. 使 用 app-article 组 件 

为 了 用 该 组 件 呈 现 数据 , 我 们 要 把 capp-articley/app-articley> 标 签 添加 到 页 面 脚本 中 的 
某 个 地 方 。 

这 个 例子 中 ， 我 们 希望 让 AppComponent 组 件 来 演 染 这 个 新 组 件 。 因 此 修改 AppComponent 的 
代码 ， 把 capp-article>， 标 签 添 加 到 AppComponent 的 模板 中 ， 紧 跟 在 </ form {rja M: 


<button (click)="addArticle(newtitle, newlink)" 
class="ui positive right floated button"> 
Submit link 
</button> 
</form> 











<div class="ui grid posts"> 
«app-article» 
«/app-article» 

«/div» 


如 果 现 在 刷新 浏览 器， 就 会 看 到 <app-article> 标 签 并 没有 被 编译 。 啊 ?怎么 回 事 ? 

无 论 什么 时 候 遇 到 这 种 问题 , 首先 要 做 的 就 是 打开 浏览 器 的 开发 者 控制 台 。 只 要 审查 一 下 页 
面 脚本 (如 图 1-14 所 示 )， 就 会 看 到 app-article 标 签 已 经 出 现在 页 面 上 了 ,但 是 并 没有 被 编译 。 
这 是 为 什么 呢 ? 





lum. 
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@ © © / fy anguler2Reddit x 


€ C | localhost:4200 


[X Ú] Elements Console Sources Network Timeline » 


ng-book 2 Angular 2 Simple Reddit v-form ngcontent-lif-1 class-"ui large form segment" 
1 





<h3 _ngcontent-lif-1 class-"ui header"-Add a Link</h3> 
><div , ngcontent-lif-1 class="field">..</div> 
><div , ngcontent-lif-1 class="field">..</div> 

<button ngcontent-lif-1 class="ui positive right floated 


button'- 
Submit link 
Add a Link </button> 
w«div ngcontent-lif-1 class="ui grid posts" 
A m app-article ngcontent-lif-1 
Title: /app-article- == $0 
</div> 
:safter 
</form> 
</app-root> 
Link: <!-- <--- Our app loads here! --> 


html body div app-root form.ui.large.form.segment  div.ui.grid.posts 
Styles Event Listeners DOM Breakpoints Properties 
28x0 Filter :hov 4» .cls + 
: - 
E element.style { 








.ui.grid»x { <style>..</style> 
padding-left: 1rem; 
padding-right: 1rem; 





*, :after, :before { <style>..</style> 
box-sizing: inherit; 











F 
Inherited from form.ui. large. form. segment] | 
„ui. large. form { «style».«/style»| Filter Show all 
font-size: 1.14285714rem; 
> box-sizing border-. 
.ui.form { <style>.</style>|” Color Mirgba(.. 
idus " display block 
} » font-family Lato, "u 
» font-size l6px — 





图 1-14 ”审查 DOM 时 未 能 展开 的 标记 


之 所 以 出 现 这 种 情况 , 是 因为 AppComponent 组 件 目前 还 不 知道 这 个 ArticleComponent 组 件 。 


Q AngularJS H P i£: 如 果 你 用 过 AngularJS， 可 能 会 惊讶 于 本 应 用 不 知道 这 个 新 
的 app-article 组 件 。 这 是 因为 在 AngularJS 中 ，, 指令 的 匹配 是 全 局 的 ; 而 Angular 
中 ， 你 需要 明确 指定 要 使 用 哪个 组 件 〈 即 哪个 选择 器 )。 
一 方面 ， 这 需要 一 点 配置 ; 但 另 一 方面 ， 这 对 于 构建 可 伸缩 的 应 用 是 非常 用 
助 的 ， 因 为 这 意味 着 我 们 不 必 被 迫 在 全 局 命名 空间 中 共享 这 些 指令 选择 器 。 


为 了 把 这 个 新 的 ArticleCcomponent 组件 引 荐 给 AppComponent ， 我 们 需要 把 Article- 
Component 添 加 到 NgModule 的 declarations 列 表 中 。 


Q, 之 所 以 要 把 ArticleComponent # #2 4 declarations T, Æ Al > Article- 
Component 是 该 模块 ( RedditAppModule ) 的 一 部 分 。 然 而 ， 如 果 Article- 
Component 是 其 他 模块 的 一 部 分 ， 可 能 就 得 通过 imports 来 导入 它 了 。 
后 面 还 会 更 深入 地 讨论 NgModule ， 现 在 你 只 需要 知道 : 当 创 建新 组 件 时 ， 必 须 
同时 把 它 放 进 NgModule 的 declarations 中 。 
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code/first_app/angular2_reddit/src/app/app.module.ts | 
import ( AppComponent } from './app.component'; 
import { ArticleComponent } from './article/article.component.ts'; 
GNgModule( { 
declarations: [ 
AppComponent , 


ArticleComponent // «-- added this 
l, 


我 们 在 这 里 
(1) 用 import 导 入 ArticleComponent; 














(2) 把 ArticleComponent 添 加 到 declarations 列 表 中 。 


把 ArticleComponent 添 加 到 NgMoqule 的 declarations 中 之 后 ， 如 果 刷 新 浏览 器 ， 就 会 看 到 
该 文章 正确 演 染 出 来 了 ( 如 图 1-15 所 示 )。 














G9 O 9 / P anguiar2- Simpie Reddit x 2 | ng-book | 








€ > Q |} localhost:8080 zs 





ww» Angular 2 Simple Reddit 


Adda Link 


Title: 


Link: 


Angular 2 


10 


POINTS ^^ upvote YY downvote 











11-15 iiU ArticleComponent?HÍfF 


， 如 果 你 尝试 点 击 “ 赞 ” 或 “ 踩 ” 的 链接 ， 就 会 看 到 该 页 面 发 生 了 预料 之 外 的 刷新 。 


在 默认 情况 下 ，JavaScript 会 把 click 事 件 冒 泡 到 所 有 父 级 组 件 中 。 因 为 click 事 件 被 冒 泡 到 了 
父 级 ， 浏 览 器 就 会 尝试 导航 到 这 个 空白 链接 ， 于 是 浏览 器 就 重新 刷新 了 。 
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要 解决 这 个 问题 ， 我 们 得 让 click 的 事件 处 理 器 返回 false。 这 能 确保 浏览 器 不 会 尝试 刷新 
页 面 。 我 们 要 修改 代码 ， 以 便 让 每 一 个 voteUp( ) 和 voteDown( ) 函数 都 返回 一 个 布尔 值 false ( 告 
诉 浏 览 器 不 要 向 上 冒 泡 ): 

voteDown(): boolean { 

this.votes -- 1; 


return false; 


} 
// and similarly with ^voteUp()^ 


现在 ,如 果 你 点 击 这 些 链接 ， 就 会 看 到 投票 数 正确 地 增加 或 减少 了 ,而且 没有 出 现 多 余 的 页 
面 刷新 。 


iini 














1.0 ERIT 


目前 ， 在 页 面 上 只 有 一 篇 文章 ， 而 且 也 没 法 泻 染 更 多 了 ， 除 非 我 们 复制 一 个 capp-articley 
标签 。 但 即使 这 样 做 ， 所 有 的 文章 也 都 会 具有 相同 的 内 容 ， 这 可 不 是 我 们 想 要 的 。 





1.9.1 创建 Article 类 


T Angular 代 码 时 的 最 佳 实践 之 一 就 是 尝试 从 组 件 代 码 中 把 你 正在 使 用 的 数据 结构 隔离 出 
来 。 要 做 到 这 一 点 ， 就 要 创建 一 个 数据 结构 ， 用 以 表示 单个 文章 。 下 面 就 创建 一 个 新 文件 
article.model.ts 来 定义 所 需 的 Article 类 吧 。 


























code/first_app/angular2_reddit/src/app/article/article.model.ts 


export class Article { 
title: string; 
link: string; 
votes: number; 


constructor(title: string, link: string, votes?: number) { 
this.title = title; 
this.link = link; 
this.votes = votes || 9; 
} 
} 
此 处 , 我 们 创建 了 一 个 新 类 , 用 来 表示 Article。 注意 , 这 是 一 个 普通 类 而 不 是 Angular 组 件 。 
在 MVC 模 式 中 ， 它 被 称 为 模型 ( model )。 


每 篇 文章 都 有 一 个 标题 title 、 一 个 链接 1ink 和 一 个 投票 总 数 votes。 当 创建 新 文章 时 ， 我 
们 需要 title 和 1ink。votes 参 数 是 可 选 的 ( 用 末尾 的 ? 标 出 来 )， 并 且 默 认为 0。 

现在 ,我 们 来 修改 ArticleComponent 的 代码 ， 让 它 使 用 新 的 Article 类 。 以 前 是 直接 把 这 些 
属性 存 到 ArticleComponent 组 件 上 ， 现 在 则 把 它 改 为 存 到 Article 类 的 一 个 实例 上 。 
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code/first app/angular2 reddit/src/app/article/article.component.ts 
export class ArticleComponent implements OnInit { 


article: Article; 


constructor() ( 
this.article - new Article( 
'Angular 2', 
'http://angular.io', 
10); 
j 


voteUp(): boolean { 
this.article.votes += 1; 
return false; 


voteDown(): boolean { 
this.article.votes -- 1 
return false; 


j 


ngOnInit() ( 


注意 我 们 改动 了 什么 : 以 前 我 们 直接 把 title 、link 和 votes 属 性 存 到 该 组 件 上 ， 而 现在 则 
存储 一 个 对 article 的 引用 。 把 article 变 量 的 类 型 设置 成 新 的 Article 类 ， 代 码 变 整 洁 了 。 


接 下 来 修改 voteUp (以 及 voteDown ) 时 ， 我 们 不 再 递增 组 件 上 的 votes 了 ， 而 是 需要 递增 
article 上 的 votes。 


这 次 重 构 还 引入 了 男 一 项 修改 : 我 们 需要 修改 视图 代码 ， 从 正确 的 位 置 获取 模板 变量 。 这 样 


我 们 就 要 修改 模板 中 的 标签 ， 使 其 从 article 中 读 取 。 也 就 是 说 ， 我 们 以 前 用 的 是 {{ votes }}, 
而 现在 要 改 成 {{ article.votes }}o 


















































code/first app/angular2 reddit/src/app/article/article.component.html 


«div class-"four wide column center aligned votes"» 
«div class="ui statistic"» 
«div class="value"> 
{{ article.votes }} 
</div> 
<div class="label"> 
Points 
</div> 
</div> 
</div> 
«div class="twelve wide column"» 
«a class-"ui large header" href="{{ article.link }}"> 
{{ article.title }} 
</a> 
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<ul class="ui big horizontal list voters"> 
«li class="item"> 
<a href (click)="voteUp()"> 
<i class="arrow up icon"»«/i» 
upvote 
</a> 
</li> 
«li class-"item"» 
<a href (click)="voteDown()"> 
<i class="arrow down icon"»«/i» 
downvote 
</a> 
</li> 
</ul> 
</div> 


刷新 浏览 器 ， 仍 然 一 切 正常 。 


情况 好 多 了 , 但 还 是 有 些 代 码 不 尽 如 人 意 : voteup 和 voteDown 方 法 打破 了 Article 类 的 封装 ， 
因为 它们 直接 修改 了 文章 的 内 部 属性 。 








当前 的 voteUp 和 voteDown 违 反 了 过 米 特 法 则 ”。 迪 米 特 法 则 是 指 : 一 个 对 象 对 
其 他 对 象 的 结构 或 属性 所 作 的 假设 应 该 越 少 越 好 。 


问题 在 于 ArticleComponent 组 件 了 解 太 多 Article 类 的 内 部 知识 了 。 要 解决 这 一 点 ， 就 要 为 
Articl e 类 添加 voteUup 和 voteDown 方 法 o 





code/first_app/angular2_reddit/src/app/article/article.model.ts 


export class Article { 
title: string; 
link: string; 
votes: number; 


constructor(title: string, link: string, votes?: number) { 
this.title = title; 
this.link = link; 
this.votes = votes || 0; 


} 


voteUp(): void { 
this.votes += 1; 


} 
voteDown(): void { 
this.votes -= 1; 


} 


domain(): string { 





(D http://en.wikipedia.org/wiki/Law_of_ Demeter 
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try { 
const link: string = this.link.split('//')[1]; 
return link.split('/')[0]; 
catch (err) ( 
return null; 
j 

j 

j 


然后 可 以 修改 ArticleComponent 组 件 来 调用 这 些 方法 。 


we 





code/first_app/angular2_reddit/src/app/article/article.component.ts 


export class ArticleComponent implements OnInit { 
article: Article; 


constructor() { 
this.article = new Article( 
'Angular', 
'http://angular.io', 
10); 
j 


voteUp(): boolean { 
this.article.voteUp(); 
return false; 


j 


voteDown(): boolean { 
this.article.voteDown(); 
return false; 


j 


ngOnInit() ( 


© 为 什么 模型 和 组 件 中 都 有 一 个 voteUp 函 数 ? 

原因 在 于 ， 这 两 个 函数 所 做 的 事情 略 有 不 同 。ArticleComponent 上 的 
voteUp() 函数 是 与 组 件 的 视图 有 关 的 ， 而 Article 模 型 上 的 voteUp() 定 义 了 
模型 上 的 变化 。 
也 就 是 说 ， 当 投票 时 , Article 类 可 以 对 模型 上 的 相应 功能 进行 封装 。 在 真实 的 
应 用 中 ，Article 模 型 的 内 部 可 能 更 加 复杂 ， 比 如 向 Web 服 务 器 发 起 一 个 API 调 
用 ， 而 你 显然 不 希望 这 些 本 属于 模型 的 代码 出 现在 组 件 的 控制 器 中 。 
同样 ， 在 ArticleComponent 中 ， 我 们 return false; 从 而 “阻止 事件 冒 泡 ”。 这 是 
属于 视图 的 逻辑 片段 ,我 们 不 希望 Article 模 型 上 的 voteUp( ) 函数 懂得 这 些 与 视图 
有 关 的 API。 也 就 是 说 ，Article 模 型 应 该 让 投票 逻辑 从 特定 的 视图 中 分 离 出 来 。 
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在 刷新 浏览 器 之 后 ， 仍 然 一 切 正 常 ， 但 我 们 已 经 有 了 更 加 清晰 、 更 加 简单 的 代码 。 


e 查看 现在 的 ArticleComponent 组 件 定义 会 发 现 : CARI! RMK ERA 
出 组 件 ， 放 进 了 模型 中 。 与 此 对 应 的 MVC 指 南 应 该 是 “ 胖 模 型 、 皮 包 骨 的 控制 
器 ”7?; 其 核心 思想 是 , 我 们 要 把 大 部 分 领域 逻辑 移 到 模型 中 ， 以便 让 组 件 只 做 

尽 可 能 By a r4. 


19.2 ”存储 多 篇 文章 
我 们 再 写 点 代码 ， 展 示 有 多 个 Article 的 列表 。 


从 让 AppComponent 拥 有 一 份 文章 集合 开始 。 


code/first_app/angular2_reddit/src/app/app.component.ts 





export class AppComponent { 
articles: Article[]; 


constructor() { 
this.articles = [ 
new Article('Angular 2', 'http://angular.io', 3), 
new Article('Fullstack', 'http://fullstack.io', 2), 
new Article('Angular Homepage', 'http://angular.io', 1), 
]; 
j 


addArticle(title: HTMLInputElement, link: HTMLInputElement): boolean { 
console.log(^Adding article title: ${title.value} and link: $[link.value]^); 
this.articles.push(new Article(title.value, link.value, 0)); 
title.value = '' 
link.value = '' 
return false; 

j 

j 


注意 我 们 的 AppComponent 中 多 了 这 一 行 : 


articles: Article[]; 


F 


1 

















Article[] 看 起 来 可 能 有 点 陌生 。 这 里 的 意思 是 articles 是 Article 的 数组 。 另 一 种 写法 是 























ArrayArticle> 。 这 种 模式 被 称 为 泛 型 。Java、C# 和 一 些 别 的 语言 中 都 有 这 个 概念 ， 意 思 是 








的 集合 (Array ) 是 有 类 型 的 。 也 就 是 说 ，Array 是 一 个 集合 ， 它 只 能 存放 Article 类 型 的 对 象 。 





我 们 通过 在 构造 函数 中 设置 this .articles 来 初始 化 这 个 数组 


code/first_app/angular2_reddit/src/app/app.component.ts 








o 


constructor() { 





(D http://weblog.jamisbuck.org/2006/10/18/skinny-controller-fat-model 





this.articles = [ 
new Article('Angular 2', 'http://angular.io', 3), 
new Article('Fullstack', 'http://fullstack.io', 2), 
new Article('Angular Homepage', 'http://angular.io', 1), 
]; 
} 


1.9.3 使 用 inputs fi] E ArticleComponent 


现在 ,我们 已 经 有 了 一 个 Article 模 型 的 列表 , 该 怎么 把 它们 传 给 ArticleComponent 组 件 呢 ? 


这 里 我 们 又 用 到 了 Input。 以 前 ArticleComponent 类 的 定义 是 下 面 这 样 的 。 





code/first app/angular2 reddit/src/app/article/article.component.ts 


export class ArticleComponent implements OnInit { 
article: Article; 


constructor() { 
this.article - new Article( 
'Angular 2', 
'http://angular.io', 
10); 
} 


问题 的 关键 是 ， 我 们 在 构造 函数 中 硬 编码 了 一 个 特定 的 Article; 而 制作 组 件 时 ， 不 但 要 能 
封装 ， 还 要 能 复 用 。 

我 们 真正 想 做 的 是 配置 要 显示 的 Article。 比 如 ,假设 我 们 有 article1 和 article2 两 篇 文章 ， 
那 就 要 支持 把 一 个 Article 型 的 “参数 ” 传 给 组 件 来 复 用 app-article 组 件 ， 就 像 这 样 : 


<app-article [article]-"article1"»«/app-article» 
«app-article [article]-"article2"»«/app-article» 






































Angular 通 过 Component 上 的 Input 注 解 来 支持 我 们 这 样 做 : 


class ArticleComponent { 
@Input() article: Article; 
Ho 




















现在 ， 如 果 我 们 有 一 个 Article 型 的 变量 myArticle ， 就 可 以 把 它 传 给 视图 中 的 Article- 
Component 了 。 记 住 ， 可 以 用 方 括号 包 庄 一 个 变量 来 把 它 传 给 元 素 ， 就 像 这 样 ; 

«app-article [article]-"myArticle"»«/app-article» 

注意 这 里 的 语法 : 我 们 把 输入 属性 的 名 字 放 入 方 括号 中 ( [article] ), 而 该 属性 的 值 就 是 我 
们 要 传 给 此 输入 属性 的 那个 。 


























ni 




















接 下 来 ， 重点 是 ArticleComponent 实 例 上 的 this.article 将 被 设置 成 myArticle。 我 们 可 
以 把 这 个 过 程 看 作 将 myArticle 变 量 作为 一 个 参数 传 给 (也 就 是 输入 给 ) 了 我 们 的 组 件 。 


ArticleComponent 组 件 使 用 @Input 之 后 变 成 了 下 面 这 样 。 
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code/first app/angular2 reddit/src/app/article/article.component.ts 


export class ArticleComponent implements OnInit { 
@Input() article: Article; 


voteUp(): boolean { 


this.article.voteUp(); 


return false; 


} 


voteDown(): boolean { 


this.article.voteDown(); 


return false; 


} 





ngOnInit() ( 
j 


1.9.4 泻 染 文章 列表 


我 们 之 前 配置 过 AppComponent 来 存储 articles 数 组 。 这 次 我 们 要 配置 AppComponent 来 泻 染 
所 有 articles。 要 实现 这 个 功能 ， 就 不 能 单独 使 用 capp-article> 标 签 了 ， 而 要 用 NgFor 指 令 在 
articles 数 组 上 进行 迭代 ， 并 为 其 中 的 每 一 个 都 泻 染 一 份 app-article。 


把 下 列 内 容 添 加 到 AppComponent 前 面 ecomponent 注 解 的 template 属 性 中 ， 紧 跟着 </formy 





标签 : 


Submit link 
</button> 
</form> 





<!-- start adding here --» 
«div class="ui grid posts"> 


«app-article 


angFor="let article of articles" 


[article]="article" 
«/app-article» 
«/div» 


> 


<!-- end adding here --> 


还 记得 我 们 之 前 用 过 NgFor 指 令 把 名 称 列 表 泻 染 成 无 序列 表 吗 ? 它 在 泻 染 多 个 组 件 时 也 同样 


适用 。 


*ngFor="let article 





of articles" 语 法 会 对 articles 列 表 进 行 迭 代 ， 并 日 为 列表 中 的 每 





一 个 条 日 创建 一 个 局 部 变量 article。 








要 为 组 件 指定 一 个 输入 





属性 article ， 就 要 使 用 [inputName]="inputValue" 表 达 式 。 在 这 个 
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例子 中 ， 该 表达 式 的 意思 是 : 我 们 要 把 输入 属性 article 设 置 为 局 部 变量 article 的 值 ， 而 后 者 ME 
是 由 ngFor 所 设置 的 。 








Q, article 变 量 在 这 个 代码 片段 中 出 现 的 次 数 太 多 了 。 如 果 我 们 把 NgFor 创 建 的 临 
时 变量 命名 为 foobar ， 或 许 更 清楚 一 些 ， 
«app-article 
*ngFor="let foobar of articles" 
[article]="foobar"> 
«/app-article» 
那么 ， 这 里 就 有 了 三 个 变量 : 
(1) articles 是 一 个 Article 的 数组 ， 由 AppComponent 组 件 定义 ; 
(2) foobar 是 一 个 articles 数 组 中 的 单个 元 素 ( 一 个 Article 对 象 ), 由 NgFor 定 义 ; 
(3) article 是 一 个 字段 名 ， 由 ArticleComponent 中 的 inputs 属 性 定义 。 
本 质 上 ，NgFor 首 先生 成 了 一 个 临时 变量 foobar ， 然 后 我 们 把 它 传 给 了 app- 


article. 


刷新 浏览 器 ， 就 会 看 到 所 有 的 文章 都 演 染 出 来 了 ( 如 图 1-16 所 示 )。 


eoo B anguar2- Simple Reddit x ng-book 


C [D localhost:6080 





ngbook2 Angular 2 Simple Reddit 


Adda Link 


Title: 


Link: 





Angular 2 
3 


个 upvote w downvote 


Fullstack 


^ upvote  downvote 





Angular Homepage 


个 upvote wẹ downvote 


K-16 Xem» 
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1.10 ”添加 新 文章 


现在 ,我们 需要 修改 addArticle 以 便 在 按 下 按钮 时 实际 添加 一 篇 新 文章 。 修 改 addArticle 
方法 ,使 其 变 成 下 面 这 样 。 


code/first_app/angular2_reddit/src/app/app.component.ts 





addArticle(title: HTMLInputElement, link: HTMLInputElement): boolean { 
console.log(^Adding article title: ${title.value} and link: $[link.value]^); 
this.articles.push(new Article(title.value, link.value, 0)); 
title.value = '' 
link.value = '' 
return false; 


j 
这 将 会 : 
(1) 创建 一 个 具有 所 提交 标题 和 URL 的 Article 新 实例 ; 
(2) 把 它 加 入 Article 数 组 ; 
(3) 清除 input 字 段 的 值 。 


, 


, 





我 们 要 如 何 清除 input 字 段 的 值 呢 ?回忆 一 下 ，title 和 1ink 都 是 HTMLInput- 
Element 对 象 。 这 就 意味 着 我 们 可 以 设置 它们 的 属性 。 当 我 们 修改 value 属 性 时 ， 
页 面 中 的 input 标 签 也 会 跟着 改变 。 


在 输入 框 中 添加 新 文章 ， 并 点 击 Submit Link 之 后 ， 就 会 看 到 新 的 文章 添加 成 功 了 ! 
1.11 最 后 的 修整 


1.11.1 显示 文章 所 属 的 域名 
我 们 先 为 链接 添加 一 个 提示 信息 ， 以 便 在 用 户 点 击 链接 时 显示 将 重 定向 到 的 域名 。 
把 qomain 方 法 添加 到 Article 类 中 。 





code/first_app/angular2_reddit/src/app/article/article.model.ts 


domain(): string { 
try { 
const link: string = this.link.split('//')[1]; 
return link.split('/')[0]; 
} catch (err) { 
return null; 
} 
} 


ex 
Ne 
E 
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A 








EXT PEREAT] AVSIM BlArt i c 1eComponent HRA : 


«div class="twelve wide column"> 
«a class-"ui large header" href="{{ article.link }}"> 
{{ article.title }} 
</a> 
<!-- right here --» 
«div class="meta">({{ article.domain() }})</div> 
«ul class-"ui big horizontal list voters"» 
«li class="item"> 
<a href (click)="voteUp()"> 


现在 ， 当 我 们 刷新 浏览 器 时 ,就 能 看 到 每 个 URL 所 属 的 域名 了 ( 注意 : URL 必 须 包含 http:// )。 








1.11.2 ”基于 分 数 重 新 排序 


如 果 你 点 击 并 投票 ， 就 会 发 现 有 些 事情 不 太 对 劲 : 这 些 文章 并 没有 基于 分 数 排序 ! 显然 , 我 
们 更 希望 让 分 数 最 高 的 条 目 显示 在 顶部 ， 让 低 分 条 目 沉 到 底部 。 


我 们 把 articles 存 储 在 了 AppComponent 类 中 ， 但 这 个 数组 是 无 序 的 。 处 理 这 种 情况 的 简单 
方式 是 在 AppComponent 上 创建 一 个 新 方法 sortedArticles。 






































code/first_app/angular2_reddit/src/app/app.component.ts 


sortedArticles(): Article[] { 
return this.articles.sort((a: Article, b: Article) => b.votes - a.votes); 


} 
这 样 ， 在 ngFor 中 ， 我 们 就 可 以 在 sortedArticles() 上 而 不 是 直接 在 articles 上 迭代 了 : 


<div class="ui grid posts"> 
«app-article 
xngFor-"let article of sortedArticles()" 
[article]="article"> 
«/app-article» 
«/div» 





1.12 全 部 代码 


在 本 章 中 , 我 们 浏览 了 代码 中 的 很 多 小 片段 。 你 可 以 到 本 书 示例 代码 的 下 载 站 点 找到 该 应 用 
的 全 部 文件 和 完整 的 TypeScript 代 码 。 


1.43 总结 


完工 ! 我 们 已 经 创建 了 自己 的 第 一 个 Angular 应 用 。 还 不 错 ， 对 吧 ? 不 过 我 们 还 会 学 到 更 多 : 
晶 解 数据 流 、 发 起 AJAX 请 求 、 内 置 指令 、 路 由 、 操 纵 DOM， 等 等 。 
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现在 ， 好 好 享受 成 功 的 喜悦 吧 ! 很 多 Angular 程 序 的 写法 都 和 我 们 刚刚 所 做 的 类 似 : 


(1) 把 应 用 拆 分 成 组 件 ; 
(2) 创建 视图 ; 





(4) 显示 模型 ; 
(5) 添加 交互 。 





在 后 面 的 章节 中 ， 我 们 将 讲解 用 Angular 编 写 各 种 复杂 应 用 的 全 部 知识 。 


1.14 ”获得 帮助 


如 有 果 你 有 关于 本 章 的 任何 问题 ， 比 如 发 现 了 bug 或 在 运行 代码 时 遇 到 问题 ， 欢 迎 告诉 我 们 ! 





口 ( 英 文 ) 加 入 我 们 的 免费 社区 ， 在 Gitter 上 跟 我 们 聊 聊 : https://gitter.im/mg-book/ng-book。 
口 (Xx) 直接 给 我 们 发 送 邮 件 : us@fullstack.io。 














book2/book。 


























继续 前 进 吧 


a (中 文 ) 如 果 是 与 中 文 版 相关 的 问题 与 其 


误 , 请 访问 我 们 的 GitHub: https://github.com/ng- 


a CPX) 获取 官方 文档 中 文 版 ， 请 访问 angularcn。 
O (PX) 如 果 想 了 解 本 书 范围 之 外 的 问题 ， 请 访问 wx.angularcn 向 我 们 提问 。 
O (中文) 要 了 解 Angular 的 最 新 消息 ， 欢 迎 搜索 并 关注 微 信 公众 号 : Angular 中 文 社区 。 


Typescript 








2.1 Angular 是 用 TypeScript 构建 的 


Angular 是 用 一 种 类 似 于 JavaScript 的 语言 一 一 TypeScript 一 构建 的 。 

或 许 你 会 对 用 新 语言 来 开发 Angular 心 存疑 虑 ， 但 事实 上 ， 在 开发 Angular 应 用 时 ,我们 有 充 
分 的 理由 用 TypeScript 代 替 普 通 的 JavaScript。 

TypeScript 并 不 是 一 门 全 新 的 语言 ， 而 是 ES6 的 超 集 。 所 有 的 ES6 代 码 都 是 完全 有 效 且 可 编译 
的 TypeScript 代 码 。 图 2-1 展 示 了 它们 之 间 的 关系 。 









































/ TypeScript 

f “类 型 pm 
|o -ÈR 
| ES6 
| - 模块 <a 


ES5 


图 2-1 ES5, ES6#llTypeScript 








(D http://www.typescriptlang.org/ 
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什么 是 ES5? 什么 是 ES6? ESSX ECMAScript 5 的 缩写 ， 也 被 称 为 “普通 的 
We ya 


JavaScript”. ES5 就 是 大 家 熟知 的 JavaScript, 它 能 够 运行 在 大 部 分 浏览 器 上 。ES6 
则 是 下 一 个 版 本 的 JavaScript， 在 后 续 章 节 中 我 们 还 会 深入 讨论 它 。 


在 本 书 出 版 的 时 候 , 支持 ES6 的 浏览 器 还 很 少 , 更 不 用 说 TypeScript 了 。 我 们 用 转译 器 来 解决 
这 个 问题 。TypeScript 转 译 吉 能 把 TypeScript 代 码 转换 为 几乎 所 有 浏览 器 都 支持 的 ES5 代 码 。 





从 TypeScript 代 码 到 ES5 代 码 的 唯一 转换 器 是 由 TypeScript 核 心 团队 编写 的 。 然 
而 ， 将 ES6 代 码 (不 是 TypeScript 代 码 ) 转换 到 ES5 代 码 则 有 两 个 主要 的 转换 器 : 
Google 开 发 的 Traceur 55 JavaScript IX 4) x£ 8 Babel? 。 在 本 书 中 我 们 并 不 会 直接 
使 用 它们 ， 但 它们 也 是 值得 了 解 的 不 错 项 目 。 

我 们 在 上 一 章 安装 了 TypeScript 环 境 ， 如 果 你 是 从 本 章 开 始 学 习 的 ， 那 么 可 以 这 
样 安装 TypeScript 环 境 : npm install -g typescript. 

















TypeScript 是 Microsoft 和 Google 之 间 的 官方 合作 项 目 。 有 这 两 家 强 有 力 的 科技 巨头 在 背后 支 
撑 ， 对 于 我 们 来 说 是 个 好 消息 ， 因 为 这 表示 TypeScript 将 会 得 到 长 期 的 支持 。 这 两 家 公司 都 承诺 
全 力 推动 Web 技 术 的 发 展 ， 我 们 这 些 开 发 人 员 显 然 会 获 益 菲 浅 。 

另外 , 转译 器 的 好 处 还 在 于 : 它 允 许 小 型 团队 对 语言 进行 改善 ， 而 不 必要 求 所 有 人 都 去 升级 
他 们 的 浏览 器 。 

需要 指出 的 是 : TypeScript 并 不 是 开发 Angular 应 用 的 必 选 语言 。 我 们 同样 可 以 使 用 ESS 代 码 
(BI "3538" JavaScript) 来 开发 Angular 应 用 。Angular 也 为 全 部 功能 提供 了 ES5 API。 那 么 为 什么 
我 们 还 要 使 用 TypeScript 呢 ?” 这 是 因为 TypeScript 有 不 少 强 大 的 功能 ， 能 极 大 地 简化 开发 。 































































































2.2 TypeScript 提供 了 哪些 特性 


TypeScript 相 对 于 ESS 有 五 大 改善 : 
O 类 型 

口 类 

口 注解 

O 模块 导入 

口 语言 工具 包 ( 比如， 解构 ) 


接 下 来 我 们 逐个 介绍 。 








(D https://github.com/google/traceur-compiler 
(25 https://babeljs.io/ 





2.3 ”类 型 


顾名思义 ， 相 对 于 ES6，TypeScript 最 大 的 改善 是 增加 了 类 型 系统 。 ET 
有 些 人 可 能 会 觉得 , 缺乏 类 型 检查 正 是 JavaScript 这 些 弱 类 型 语言 的 优点 。 也 许 你 对 类 型 检查 
心 存疑 虑 ， 但 我 仍然 鼓励 你 试 一 试 。 类 型 检查 的 好 处 有 : 

(1) 有 助 于 代码 的 编写 ， 因 为 它 可 以 在 编译 期 预防 bug; 

(2) 有 助 于 代码 的 阅读 ， 因 为 它 能 清晰 地 表明 你 的 意图 。 

另外 值得 一 提 的 是 ，TypeScript 中 的 类 型 是 可 选 的 。 如 果 和 希望 写 一 些 快速 代码 或 功能 原型 ， 
可 以 首先 省 略 类 型 ， 然 后 再 随 着 代码 日 趋 成 熟 逐 渐 加 上 类 型 。 

TypeScript 的 基本 类 型 与 我 们 平时 所 写 JavaScript 代 码 中 用 的 隐 式 类 型 一 样 ， 包 括 字 符 串 、 数 
字 、 布 尔 值 等 。 

直到 ES5 ， 我 们 都 在 用 var 关 键 字 定义 变量 ， 比 如 var name; 。 

TypeScript 的 新 语法 是 从 ES5 自 然 演化 而 来 的 ， 仍 沿用 var 来 定义 变量 ,但 现在 可 以 同时 为 变 
量 名 提供 可 选 的 变量 类 型 了 : 

var name: string; 

在 声明 函数 时 ， 也 可 以 为 函数 参数 和 返回 值 指定 类 型 


function greetText(name: string): string { 
return "Hello " + name; 


] 

这 个 例子 中 , 我 们 定义 了 一 个 名 为 greetText 的 新 函数 , 它 接 收 一 个 名 为 name 的 参数 。name: 
string 语 法 表示 函数 想 要 的 name 参 数 是 string 类 型 。 如 果 给 该 函数 传 一 个 string 以 外 的 参数 ， 
代码 将 无 法 编译 通过 。 对 我 们 来 说 ， 这 是 好 事 ， 否 则 这 段 代 码 将 会 引入 bug。 

或 许 你 还 注意 到 了 ，greetText 国 数 在 括号 后 面 还 有 一 个 新 语法 :string {。 冒 号 之 后 指定 
的 是 该 函数 的 返回 值 类 型 ， 在 本 例 中 为 string。 这 很 有 用 ， 原 因 有 二 : 如 果 不 小 心 让 函数 返回 了 
一 个 非 string 型 的 返回 值 , 编译 器 就 会 告诉 我 们 这 里 有 错误 ; 使 用 该 函数 的 开发 人 员 也 能 很 清晰 
地 知道 自己 将 会 拿 到 什么 类 型 的 数据 。 

我 们 来 看 看 如 果 写 了 不 符合 类 型 声明 的 代码 会 怎样 : 


function hello(name: string): string { 
return 12; 


} 
当 尝试 编译 代码 时 ， 将 会 得 到 下 列 错误 : 


$ tsc compile-error.ts 
compile-error.ts(2,12): error TS2322: Type 'number' is not assignable to type 'string'. 
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这 是 怎么 回 事 ? 我 们 尝试 返回 一 个 number 类 型 的 12 ， 但 hello 国 数 期 望 的 返回 值 类 型 为 




















string ( 它 是 在 参数 声明 的 后 面 以 ): string {的 形式 声明 的 )。 
要 纠正 它 ， 可 以 把 函数 的 返回 值 类 型 改 为 number : 


function hello(name: string): number { 
return 12; 














} 
虽然 这 只 是 一 个 小 例子 ， 但 足以 证 明 类 型 检查 能 为 我 们 节省 大 量 调试 bug 的 时 间 。 











现在 知道 了 如 何 使 用 类 型 , 但 怎么 才能 知道 有 哪些 可 用 类 型 呢 ? 接 下 来 我 们 就 会 罗列 出 这 





内 置 的 类 型 ， 并 教 你 如 何 创建 自己 的 类 型 。 


尝试 REPL 





此 


为 了 运行 本 章 中 的 例子 , 我 们 要 先 安装 一 个 小 工具 , 名 为 TSUN ( TypeScript Upgraded Node, 


支持 TypeScript 的 升级 版 Node ): 
$ npm install -g tsun 
接着 启动 它 : 


$ tsun 

TSUN : TypeScript Upgraded Node 

type in TypeScript expression to evaluate 
type :help for commands in repl 


> 


这 个 小 小 的 > 是 一 个 命令 提示 符 ， 表 示 TSUN 已 经 准备 好 接收 命令 了 。 
对 于 本 章 后 面 的 大 部 分 例子 ， 你 都 可 以 复制 粘贴 到 这 个 终端 窗口 中 运行 。 





24 内 置 类 型 


24.1 字符 串 


FAT BAG CA, FW strings. 


var name: string = 'Felipe'; 




















无 论 整数 还 是 浮 点 ， 任 何 类 型 的 数字 都 属于 number 类 型 。 在 TypeScript 中 ， 所 有 的 数字 都 是 














(D https://github.com/HerringtonDarkholme/typescript-repl 
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用 浮 点 数 表示 的 ， 这 些 数字 的 类 型 就 是 number : 


var age: number = 36; 





2.4.3 布尔 类 型 


布尔 类 型 (boolean) 以 true ( 真 ) 和 false CIEL) 为 值 。 


var married: boolean = true; 


2.4.4 数组 




















数组 用 Array 类 型 表示 。 然 而 ， 因 为 数组 是 一 组 相同 数据 类 型 的 集合 ， 所 以 我 们 还 需要 为 数 
组 中 的 条 目 指 定 一 个 类 型 。 


我 们 可 以 用 Array<type> 或 者 type[] 语 法 来 为 数组 条 目 指 定 元 素 类 型 : 








var jobs: Array«string» = ['IBM', 'Microsoft', 'Google']; 
var jobs: string[] = ['Apple', 'Dell', 'HP']; 

数字 型 数组 的 声明 与 之 类 似 : 

var jobs: Array<number> = [1, 2, 3]; 

var jobs: number[] = [4, 5, 6]; 


2.4.5 as 
枚 举 是 一 组 可 命名 数值 的 集合 。 比 如 ， 如 果 我 们 想 拿 到 某 人 的 一 系列 角色 ， 可 以 这 么 写 : 


enum Role {Employee, Manager, Admin}; 
var role: Role = Role.Employee; 


默认 情况 下 ， 枚 举 类 型 的 初始 值 是 0。 我 们 也 可 以 调整 初始 化 值 的 范围 


enum Role {Employee = 3, Manager, Admin}; 
var role: Role = Role.Employee; 


在 上 面 的 代码 中 ，Employee 的 初始 值 被 设置 为 3 而 不 是 6。 枚 举 中 其 他 项 的 值 是 依次 递增 的 ， 
意味 着 Manager 的 值 为 4，Admin 的 值 为 5。 同 样 ， 我 们 也 可 以 单独 为 枚 举 中 的 每 一 项 指定 值 : 


enum Role {Employee = 3, Manager = 5, Admin = 7}; 
var role: Role = Role.Employee; 


还 可 以 从 枚 举 的 值 来 反 查 它 的 名 称 : 


enum Role {Employee, Manager, Admin}; 
console.log('Roles: ', Role[0], ',', Role[1], 'and', Role[2]); 









































E 
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24.6 任意 类 型 


























如 果 我 们 没有 为 变量 指定 类 型 ， 那 它 的 默认 类 型 就 是 any。 在 TypeScript 中 ，any 类 型 的 变量 
能 够 接收 任意 类 型 的 数据 : 
var something: any = ‘as string'; 


something = 1; 
something = [1, 2, 3]; 





24.7 “无 ”类 型 
void 意 味 着 我 们 不 期 望 那 里 有 类 型 。 它 通常 用 作 函 数 的 返回 值 ， 表 示 没 有 任何 返回 值 : 


function setName(name: string): void { 
this.name = name; 


} 




















2.5 类 


JavaScript ES5 采 用 的 是 基于 原型 的 面向 对 象 设计 。 这 种 设计 模型 不 使 用 类 ,而 是 依赖 于 原型 。 




















JavaScript 社 区 采纳 了 大 量 最 佳 实践 ， 以 弥补 JavaScript 缺 少 类 的 问题 。 这 些 最 佳 实践 已 经 被 
总 结 在 Mozilla 的 开发 指南 中 了 ”"， 你 还 可 以 找到 一 篇 关于 JavaScript 面 向 对 象 设计 的 优秀 概述 ”。 
不 过 ， 在 ES6 中 ， 我 们 终于 有 内 置 的 类 了 。 
用 class 关 键 字 来 定义 一 个 类 ， 紧 随 其 后 的 是 类 名 和 类 的 代码 块 : 


class Vehicle { 


} 
类 可 以 包含 属性 、 方 法 以 及 构造 函数 。 

















2.5.4 属性 





属性 定义 了 类 实例 对 象 的 数据 。 比 如 名 叫 Person 的 类 可 能 有 first_name 、last_name 和 age 




















类 中 的 每 个 属性 都 可 以 包含 一 个 可 选 的 类 型 。 比 如 , 我 们 可 以 把 first_name 和 1ast_name 声 
明 为 字符 串 类 型 ( string )， 把 age 声明 为 数字 类 型 (number )。 


Person 类 的 声明 是 这 样 的 : 














(D https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide 
©® https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript 
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»* 


2:5 





class Person { 
first_name: string; 
last_name: string; 
age: number; 


} 


2.5.2 方法 


方法 是 运行 在 类 对 象 实例 上 下 文中 的 函数 。 
实例 。 


在 调用 对 象 的 方法 之 前 ， 必 须要 有 这 个 对 象 的 


要 实例 化 一 个 类 ， 我 们 使 用 new 关 键 字 。 比 如 new Person() 会 创建 一 个 Person 


类 的 实例 对 象 。 





如 果 我 们 希望 问候 某 个 Person， 就 可 以 这 样 


class Person { 
first_name: string; 
last_name: string; 
age: number; 





B; 


rst_name 表 达 式 来 访问 Person 类 的 first_name 


greet() { 
console.log("Hello", this.first name); 
j 
j 
注意 ， 借 助 tnis 关 键 字 ， 我 们 能 用 this .fi 








a YE. 


如 果 没 有 显 式 声 明 过 方法 的 返回 类 型 和 返回 


TH 
Pam) 








值 ,就 会 假定 它 可 能 返回 任何 东西 ( 即 any 类 型 )。 





然而 ， 因 为 这 里 没有 任何 显 式 的 return 语 句 ， 所 以 实际 返回 的 类 型 是 void。 





人 注意 ，void 类 型 也 是 一 种 合法 的 any 类 型 。 


调用 greet 方 法 之 前 ,我 们 要 有 一 个 Person 类 的 实例 对 象 。 代 码 如 下 : 


// declare a variable of type Person 
var p: Person; 


// instantiate a new Person instance 
p = new Person(); 


// give it a first name 
p.first name - 'Felipe'; 


// call the greet method 
p.greet(); 
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我 们 还 可 以 将 对 象 的 声明 和 实例 化 缩写 为 一 行 代 码 : 


var p: Person = new Person(); 





假设 我 们 希望 Person 类 有 一 个 市 返回 值 的 方法 。 比 如 ， 要 获取 某 个 Person 在 数 年 后 的 年 龄 ， 
我 们 可 以 这 样 写 : 


class Person { 
first_name: string; 
last_name: string; 
age: number; 


greet() { 
console.log("Hello", this.first name); 


} 


ageInYears(years: number): number { 
return this.age + years; 
} 
} 


// instantiate a new Person instance 
var p: Person = new Person(); 


// set initial age 
p.age = 6; 


// how old will he be in 12 years? 
p.ageInYears(12); 


// -> 18 


2.5.3 ”构造 函数 
构造 函数 是 当 类 进行 实例 化 时 执行 的 特殊 函数 。 通 常会 在 构造 函数 中 对 新 对 象 进行 初始 化 


工作 。 








构造 函数 必须 命名 为 constructor。 因 为 构造 函数 是 在 类 被 实例 化 时 调用 的 ， 所 以 它们 可 以 
有 输入 参数 ， 但 不 能 有 任何 返回 值 。 


o 我 们 要 通过 调用 new ClassName( ) 来 执行 构造 函数 ， 以 完成 类 的 实例 化 。 





当 类 没有 显 式 地 定义 构造 函数 时 ， 将 自动 创建 一 个 无 参 构造 函数 : 


class Vehicle { 


} 


var v = new Vehicle(); 
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它 等 价 于 : 


class Vehicle { 
constructor() { 
} 

} 


var v = new Vehicle(); 





在 TypeScript 中 ， 每 个 类 只 能 有 一 个 构造 函数 。 
这 是 违背 ES6 标 准 的 。 在 ES6 中 ， 一 个 类 可 以 拥有 不 同 参 数 数 量 的 多 个 构造 函数 
重 载 实现 。 


我 们 可 以 使 用 带 参数 的 构造 函数 来 将 对 象 的 创建 工作 参数 化 。 
比如 ,我 们 可 以 对 Person 类 使 用 构造 函数 来 初始 化 它 的 数据 : 


class Person { 
first_name: string; 
last_name: string; 
age: number; 


constructor(first_name: string, last_name: string, age: number) { 
this.first name = first name; 
this.last name - last name; 
this.age - age; 


j 


greet() { 
console.log("Hello", this.first name); 


j 


ageInYears(years: number): number { 
return this.age + years; 


} 
} 
用 下 面 这 种 方法 重 写 前 面 的 例子 要 容易 些 : 
var p: Person = new Person('Felipe', 'Coury', 36); 
p.greet(); 


当 创建 这 个 对 象 的 时 候 ， 其 姓名 、 年 龄 都 会 被 初始 化 。 


2.5.4 ”继承 


面向 对 象 的 另 一 个 重要 特性 就 是 继承 。 继 承 表 明子 类 能 够 从 父 类 得 到 它 的 行为 。 然 后 ,我 们 
就 可 以 在 这 个 子 类 中 重 写 、 修 改 以 及 添加 行为 。 
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如 果 要 深入 了 解 ES5 的 继承 是 如 何 工作 的 ， 可 以 参考 Mozilla 开 发 文档 中 的 文章 
"Inheritance and the prototype chain" ". 








TypeScript 是 完全 支持 继承 特性 的 ， 并 不 像 ES5 那 样 要 靠 原型 链 实现 。 继 承 是 TypeScript 的 核 
心 语法 ， 用 extends 关 键 字 实现 。 


要 说 明 这 一 点 ， 我 们 来 创建 一 个 Report 类 : 


class Report { 
data: Array<string>; 


constructor(data: Array<string>) { 
this.data = data; 


} 
run() { 


this.data. forEach(function(line) { console.log(line); }); 
} 
} 


这 个 Report 类 有 一 个 字符 串 数 组 类 型 的 qata 的 属性 。 当 我 们 调用 run 方 法 时 ， 它 会 循环 这 个 
data 数 组 中 的 每 一 项 数据 ， 然 后 用 console. 1og 打 印 出 来 。 











O .forEach 是 Array 中 的 一 个 方法 ， 它 接收 一 个 函数 作为 参数 ， 并 对 数组 中 的 每 
一 个 条 目 逐 个 调用 该 函数 。 


给 Report 增 加 几 行 数据 ， 并 调用 run 把 这 些 数 据 打 印 到 控制 台 : 


var r: Report = new Report(['First line', 'Second line']); 
r.run(); 


运行 结果 如 下 : 


First line 
Second line 





现在 ,假设 我 们 希望 有 第 二 个 报表 ， 它 需要 增加 一 些 头 信息 和 数据 ， 但 我 们 仍 想 复 用 现 有 
Report 类 的 run 方 法 来 向 用 户 展示 数据 。 


为 了 复 用 Report 类 的 行为 ， 要 使 用 extends 关 键 字 来 继承 它 : 


class TabbedReport extends Report { 
headers: Array<string>; 

















constructor(headers: string[], values: string[]) { 
super (values) 





(D https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain 
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this.headers = headers; 


} 
run() { 


console. log(this.headers) ; 
super .run( ); 





} 
} 
var headers: string[] = ['Name']; 
var data: string[] = ['Alice Green', 'Paul Pfifer', ‘Louis Blakenship']; 
var r: TabbedReport = new TabbedReport(headers, data) 
r.run(); 
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ES6 和 TypeScript 提 供 了 许多 语法 特性 ， 证 编码 成 为 一 种 享受 。 其 中 最 重要 的 两 点 是 : 
口 胖 箭 头 函 数 语 法 
a 模板 字符 串 








2.6.1 胖 箭 头 函 数 

ERS (=>) 函数 是 一 种 快速 书写 函数 的 简洁 语法 。 

在 ES5 中 ,每 当 我 们 要 用 函数 作为 方法 参数 时 ， 都 必须 用 function 关 键 字 和 紧 随 其 后 的 花 括 
号 ({} ) 表示 。 就 像 这 样 : 


// ES5-like example 
var data - ['Alice Green', 'Paul Pfifer', 'Louis Blakenship']; 
data.forEach(function(line) ( console.log(line); }); 


现在 我 们 可 以 用 => 语 法 来 重 写 它 了 : 


// Typescript example 
var data: string[] = ['Alice Green', 'Paul Pfifer', ‘Louis Blakenship']; 
data. forEach( (line) => console.log(line) ); 


当 只 有 一 个 参数 时 ， 圆 括号 可 以 省 略 。 箭 头 〈=， ) 语法 可 以 用 作 表 达 式 : 


var evens = [2,4,6,8]; 
var odds = evens.map(v => v + 1); 


也 可 以 用 作 语 句 : 


data.forEach( line => { 
console. log(line.toUpperCase( ) ) 


1); 
= 语法 还 有 一 个 重要 的 特性 ， 就 是 它 和 环绕 它 的 外 部 代码 共享 同一 个 this。 这 是 它 和 普通 
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function 写 法 最 重要 的 不 同 点 。 通 常 ， 我 们 用 function 声 明 的 函数 有 它 自 己 的 this 。 有 时 在 
JavaScript 中 能 看 见 如 下 代码 : 


var nate = { 
name: "Nate", 
guitars: ["Gibson", "Martin", "Taylor"], 
printGuitars: function() { 
var self = this; 
this.guitars.forEach(function(g) { 
// this.name is undefined so we have to use self.name 
console.log(self.name + " plays a " + g); 
}); 
} 
}; 


由 于 胖 箭 头 会 共享 环绕 它 的 外 部 代码 的 this ， 我 们 可 以 这 样 改 写 : 


var nate = { 
name: "Nate", 
guitars: ["Gibson", "Martin", "Taylor"], 
printGuitars: function() { 
this.guitars.forEach( (g) => { 
console.log(this.name + " plays a " + g); 
ioe 
} 
}; 


可 见 ， 箭 头 函 数 是 处 理 内 联 函数 的 好 办 法 。 这 也 让 我 们 在 JavaScript 中 更 容易 使 用 高 阶 函 数 。 




















2.6.2 ”模板 字符 串 
ES6 引 入 了 新 的 模板 字符 串 语法 ， 它 有 两 大 优势 : 
(1) 可 以 在 模板 字符 串 中 使 用 变量 ( 不必 被 迫使 用 + 来 拼接 字符 串 ); 
(2) 支持 多 行 字 符 串 。 
1. 字符 串 中 的 变量 
这 种 特性 也 叫 字符 串 插值 ( string interpolation )。 你 可 以 在 字符 串 中 插入 变量 ， 做 法 如 下 : 


var firstName = "Nate"; 
var lastName = "Murray"; 











// interpolate a string 
var greeting = ^Hello ${firstName} $[lastName]'; 


console. log(greeting); 


注意 ,字符 串 捅 值 必须 使 用 反 引 号 ， 不 能 用 单 引 号 或 双 引 号 。 














2. 多 行 字符 串 
反 引 号 字符 串 的 另 一 个 优点 是 允许 多 行文 本 : 


var template = ~ 
<div> 

<hi>Hello</h1> 

<p>This is a great website</p> 
</div> 





// do something with ~template~ 


当 我 们 要 插入 模板 这 样 的 长 文本 字符 串 时 ， 多 行 字 符 串 会 非常 有 帮助 。 
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在 TypeScript 和 ES6 中 还 有 很 多 其 他 的 优秀 语法 特性 ， 如 : 
口 接口 

口 泛 型 
口 模块 的 导入 、 导 出 





口 标注 
口 解构 


我 们 会 在 本 书 的 后 续 章 节 中 讲 到 这 些 概念 并 使 用 它们 。 目 前, 本 章 的 这 些 基本 知识 已 经 足够 
你 开始 学 习 Angular 了 。 


言 归 正 传 ， 让 我 们 回 到 Angular 吧 ! 








Angular 的 工作 原理 











本 章 将 讨论 Angular 中 的 高 级 概念 ， 从 全 局 视角 来 分 析 各 细节 部 分 是 如 何 协同 工作 的 。 


如 果 你 用 过 AngularJS , 会 发 现 Angular 采 用 了 全 新 的 思维 模型 来 构建 应 用 。 别 担 
心 ， 作 为 AngularJS 的 使 用 者 , 我们 觉得 Angular 的 设计 既 简 明 又 熟悉 。 在 本 书 稍 
后 的 章节 中 ， 我 们 会 专门 讨论 如 何 将 AngularJS 应 用 转换 成 Angular 应 用 。 


在 后 面 的 章节 里 ,我 们 会 对 每 一 个 概念 进行 深入 讲解 ,但 目前 只 作 概 述 并 解释 最 基础 的 概念 。 


第 一 个 重要 概念 : Angular 应 用 是 由 组 件 构 成 的 。 可 以 将 组 件 理解 为 一 种 教 浏览 器 认识 新 
HTML 标 签 的 方式 。 如 果 你 有 使 用 AngularJS 的 经 验 ， 那么 可 以 把 组 件 理解 为 类 似 于 指令 的 概念 。 
(事实 上 ，Angular 中 也 有 指令 ， 我 们 会 在 后 面 讨论 具体 的 差异 。) 


其 实 ， 相 比 AngularJS 中 的 指令 ，Angular 中 的 组 件 有 一 些 重 要 优势 ,我 们 会 详细 讨论 。 现 在 ， 
让 我 们 先 来 看 看 最 顶级 的 概念 : 应 用 。 














3.1 应 用 


一 个 Angular 应 用 其 实 就 是 一 棵 由 组 件 构成 的 树 。 

在 这 棵 树 的 根 结 点 ,最 顶层 的 组 件 就 是 应 用 本 身 。 它 会 在 浏览 器 启动 (也 叫 引导 ) 应 用 的 时 
候 被 泻 染 。 

组 件 有 一 个 很 棒 的 特性 , 那 就 是 它们 是 可 组 合 的 .这 意味 着 我 们 可 以 基于 小 组 件 构建 大 组 件 。 
应 用 只 是 一 个 会 浑 染 其 他 组 件 的 组 件 而 已 。 


由 于 组 件 是 以 树 型 结构 组 织 起 来 的 ， 当 每 个 组 件 被 泻 染 时 ， 它 都 会 递归 地 演 染 下 级 组 件 。 
举 个 例子 ， 让 我 们 基于 如 图 3-1 所 示 的 原型 图 创建 一 个 简单 的 库存 管理 系统 。 

拿 到 这 个 原型 图 后 ， 我 们 应 该 做 的 第 一 件 事 就 是 把 页 面 拆 分 成 组 件 。 

在 这 个 例子 里 ， 我 们 可 以 对 页 面 内 容 进 行 分 组 ， 并 抽象 成 三 个 高 层级 组 件 : 
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(1) 主导 航 组 件 
(2) 面包 居 导 航 组 件 
(3) 产品 列表 组 件 





SKU# 104544-2 $109.99 
Nykee Running Shoes 


Men > Shoes > Running Shoes 


SKU# 187611-0 $238.99 
South Face Jacket 
Women > Apparel > Jackets & Vests 


SKU# 443102-9 $238.99 
Adeeds Active Hat 
Men > Accessories > Hats 





图 3-1 库存 管理 系统 


3.1.1 主导 航 组 件 


这 个 组 件 用 来 展示 主导 航 部 分 ， 用 户 可 以 通过 主导 航 组 件 访问 应 用 的 其 他 部 分 ( 如 图 3-2 所 
Zh Jo 





NEED" EN (100 — (COE NNNM 





图 3-2 主导 航 组 件 





3.1.2 HARB e RE 
这 个 组 件 用 来 展示 用 户 在 本 应 用 “网 站 地 图 ”中 的 当前 位 置 ( 如 图 3-3 所 示 )。 
Products y Products List 


图 3-3 WEEE 
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3.4.8 ”产品 列表 组 件 
产品 列表 组 件 用 来 展示 一 组 产品 ( 如 图 3-4 所 示 )。 


N A] SKU# 104544-2 
Image Nykee Running Shoes 
V4 NI Men > Shoes > Running Shoes 


~N pL SKU# 187611-0 
Image South Face Jacket 





Z NI Women > Apparel > Jackets & Vests 


N A| SKU# 443102-9 
Image Adeeds Active Hat 
Z N Men > Accessories > Hats 





图 3-4 ”产品 列表 组 件 
我 们 还 可 以 继续 拆 分 产品 列表 组 件 ， 从 而 得 到 下 一 级 的 产品 条 目 组 件 ( 如 图 3-5 所 示 )。 


IN ^L SKU# 104544-2 $109.99 
Image Nykee Running Shoes 
Z N Men » Shoes » Running Shoes 
图 3-5 产品 条 目 组 件 


当然 ， 我 们 可 以 再 进一步 ， 把 每 个 产品 条 目 组 件 拆 分 为 更 小 的 组 件 。 


a 产品 图 片 组 件 用 来 根据 指定 的 图 片 名 称 显 示 产 品 图 片 。 

O 产品 分 类 组 件 用 来 展示 产品 分 类 树 。 比 如 : 男装 > HE > 跑鞋 。 

O 价格 显示 组 件 用 来 展示 产品 价格 。 如 果 我 们 对 产品 价格 有 定制 化 需求 ， 比 如 用 户 登 录 后 
可 以 获得 全 局 折扣 或 者 包 邮 ， 就 可 以 在 这 个 组 件 中 实现 。 


最 后 ， 把 以 上 组 件 按 层级 结构 进行 整理 ， 就 得 到 了 如 图 3-6 所 示 的 树 状 图 。 
在 树 状 图 的 顶层 可 以 看 到 我 们 的 应 用 : 库存 管理 系统 。 

往 下 细 分 为 主导 航 、 面 包 导 导 航 和 产品 列表 组 件 。 

产品 列表 组 件 包 含 一 些 产 品 条 目 组 件 ， 每 个 产品 各 一 个 。 


产品 条 目 组 件 又 包含 三 个 更 下 层 的 组 件 : 一 个 用 于 展示 图 片 , 一 个 用 于 展示 分 类 , 一 个 用 于 
展示 价格 。 


现在 ， 让 我 们 一 起 来 实现 这 个 应 用 。 



























































你 可 以 在 本 书 下 载 内 容 的 how_angular works/inventory app 目 录 中 找到 本 章 涉 及 
的 全 部 代码 。 
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库存 管理 系统 


产品 列表 








HUREN 


价格 显示 


图 3-6 ”应 用 树 状 图 
当 我 们 的 应 用 完成 之 后 ， 它 看 起 来 应 该 如 图 3-7 所 示 。 


@ © @ / Bno-book2: inventory App x 

















€ > C 1 localhost:8080 





a ne-book2 Angular 2 Inventory App 


Black Running Shoes 
€ SKU #MYSHOES 
NS Men » Shoes » Running Shoes 


Blue Jacket 
SKU #NEATOJACKET 
Women > Apparel > Jackets & Vests 


ANice Black Hat 
SKU #NICEHAT 


Men > Accessories > Hats 





$109.99 


$238.99 


$29.99 





K3-7 “完成 的 库存 管理 


系统 
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3.2 ”产品 数据 模型 

关于 Angular， 有 一 件 事 你 必须 清楚 : 它 不 要 求 使 用 指定 的 数据 模型 库 。 

Angular 十 分 灵活 ， 可 以 支持 多 种 不 同 的 数据 模型 ( 和 数据 架构 )。 不 过 这 也 意味 着 你 需要 决 
定 自己 的 实现 方式 。 

关于 数据 结构 ， 我 们 会 在 第 9 章 详 细 讲 解 。 在 本 章 中 ,我 们 仅 使 用 普通 的 JavaScript 对 象 作为 
数据 模型 。 


code/how_angular_works/inventory_app/app.ts 





























/** 
x Provides a ~Product~ object 
*/ 
class Product { 
constructor ( 
public sku: string, 
public name: string, 
public imageUrl: string, 
public department: string[], 
public price: number) { 
} 
} 


如 果 你 还 不 熟悉 ES6/TypeScript， 可 能 会 对 这 段 代 码 的 语法 感到 陌生 。 
上 面 的 代码 创建 了 一 个 名 叫 Product 的 类 ， 这 个 类 的 构造 函数 接收 5 个 参数 。public sku: 
string 这 行 代 码 有 两 个 意思 ; 


口 这 个 类 的 实例 有 一 个 名 为 sku 的 公共 属性 ; 
口 sku 的 类 型 是 string。 


























如 果 你 已 经 比较 熟悉 JavaScript, 可 以 通过 learnxinyminutes" 上 的 教程 来 快速 补充 
相关 知识 ， 比 如 上 面 代码 中 的 public constructor 简写 形式 。 


上 面 代 码 中 的 Product 类 不 依赖 Angular 中 的 任何 东西 , 它 只 是 一 个 我 们 会 在 应 用 中 用 到 的 数 
据 模 型 。 





3.3 组 件 


前 面 提 到 过 ， 组 件 是 构成 Angular 应 用 的 基本 组 成 部 分 。 "应 用 ”本 刁 就 是 一 个 顶层 组 件 ， 并 
且 我 们 把 应 用 划分 成 了 细 粒 度 的 组 件 。 











(D https://learnxinyminutes.com/docs/typescript/ 
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Q, 技巧 : 当 开发 新 的 Angular 应 用 时 ， 先 画 出 原型 图 ， 然 后 拆 分 成 组 件 。 


为 我 们 经 常用 到 组 件 ， 所 以 有 必要 对 组 件 进 行进 一 步 研究 。 


每 个 组 件 都 由 三 个 部 分 组 成 : a 
a 组 件 注解 
口 视图 
口 控制 器 

要 清楚 这 些 关键 概念 ， 就 要 充分 理解 组 件 。 我 们 先 来 分 析 顶 层 的 库存 管理 系统 应 用 ， 然 后 再 
来 分 析 产 品 列表 及 其 下 级 组 件 (如 图 3-8 所 示 )。 














库存 管理 系统 











图 3-8 ”产品 列表 组 件 
一 个 基本 的 顶层 应 用 InventoryApp (库存 管理 系统 ) 看 起 来 是 这 样 的 : 


GComponent( { 
selector: 'inventory-app', 
template: ^ 
«div classz"inventory-app"» 
(Products will go here soon) 
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</div> 
}) 
class InventoryApp { 


// Inventory logic here 


} 

// module boot here... 

如 果 你 用 过 AngularJS， 可 能 会 觉得 完全 看 不 懂 这 段 代 码 。 别 担心 ， 其 实 两 者 的 思路 还 是 很 
相似 的 ， 让 我 们 来 一 步 一 步 地 分 析 。 

这 段 代 码 中 的 ecomponent 被 称 作 注解 。 它 给 紧 随 其 后 的 类 (InventoryApp ) 添加 了 一 些 元 
数据 。 

@Component 注解 明确 了 下 面 两 项 : 
O selector (选择 器 ) 用 来 告诉 Angular 要 匹配 哪个 HTML 元 素 ; 
CL] template (模板 ) 用 来 定义 视图 。 
组 件 的 控制 器 是 由 一 个 TypeScript 类 定义 的 ， 比 如 前 面 代 码 中 的 InventoryApp 类 。 
接 下 来 让 我 们 对 代码 中 的 各 个 部 分 进行 更 详细 的 分 析 。 



































3.4 组 件 注解 

@Component 注 解 是 对 组 件 进行 配置 的 地 方 。 一 般 来 说 ，@Component 会 配置 你 的 组 件 如 何 与 
外 界 交 互 。 

要 配置 一 个 组 件 ， 有 很 多 种 方法 (我们 会 在 第 14 章 中 进行 讲解 )。 本 章 只 会 涉及 一 些 基 本 
配置 。 





3.4.1 组 件 selector 

通过 selector (选择 器 ) 配置 项 ， 可 以 指定 当 HTML 模 板 被 泻 染 时 Angular 如 何 找 到 组 件 。 
这 个 思路 与 CSS、XPath 中 的 选择 器 很 像 。 我 们 可 以 用 选择 器 来 定义 HTML 中 的 哪些 元 素 用 来 与 组 
件 匹 配 。 在 前 面 的 例子 中 ，selector: inventory-app 就 表示 我 们 希望 在 HTML 中 匹配 
inventory-app 标 签 。 也 就 是 说 ， 我 们 定义 了 一 个 新 的 HTML 标 签 ， 每 当 我 们 使 用 这 个 标签 时 ， 
它 都 拥有 我 们 定义 的 功能 。 例 如 ， 我 们 把 下 面 这 段 代 码 放 到 HTML 中 : 

<inventory-app></inventory-app> 

Angular 就 会 自动 使 用 我 们 定义 的 InventoryApp 组 件 来 实现 这 个 标签 的 功能 。 

此 外 ， 这 个 例子 中 定义 的 选择 器 还 可 以 匹配 一 个 以 组 件 名 为 属性 的 普通 div 元 素 : 


«div inventory-app»«/div» 
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3.4.2 组 件 template 


视图 是 一 个 组 件 中 可 视 的 部 分 。 我 们 可 以 用 @component 中 的 template 配 置 项 来 定义 组 件 所 
用 的 HTML 模板: 


@Component ( { 


selector: 'inventory-app', 
template: ^ 


«div class="inventory-app"> 
(Products will go here soon) 
«/div» 











}) 
可 以 看 到 ， 在 template 配 置 项 里 ,我 们 用 到 了 TypeScript 中 用 反 引 号 包 庄 的 多 行文 本 语法 。 
到 目前 为 止 ， 我 们 的 模板 还 都 很 简单 : 只 有 一 个 div 和 一 些 占 位 文本 。 


如 果 希 望 把 模板 放 到 一 个 单独 的 文件 中 ， 可 以 将 组 件 的 template 配 置 项 改 为 
templateUrl 配 置 项 ， 把 配置 的 内 容 设 置 为 模板 文件 名 即 可 。 


3.4.8 添加 产品 


我 们 的 应 用 现在 还 没有 产品 可 展示 ， 需 要 添加 一 些 。 
可 以 用 如 下 代码 创建 一 个 Product : 


let newProduct = new Product( 











"NICEHAT' , // sku 

'A Nice Black Hat', // name 
'/resources/images/products/black-hat.jpg', // imageUrl 
['Men', 'Accessories', 'Hats'], // department 
29.99); // price 


Product 类 的 构造 函数 接收 5 个 参数 。 新 建 一 个 Product 实 例 要 用 到 new 关 键 词 。 


e 一 般 情况 下 ， 我 们 应 该 不 会 向 一 个 函数 传递 超过 5 个 参数 。 另 一 种 做 法 是 将 
Product 类 的 构造 函数 修改 为 接收 一 个 配置 对 象 ,这 样 就 可 以 不 必 记 住 参 数 的 顺 
序 了 。 如 果 这 样 做 ,我们 就 可 以 像 这 样 编写 Product 类 的 代码 : 
new Product({sku: "MYHAT", name: "A green hat"}) 


但 就 目前 来 说 ，5 个 参数 的 构造 函数 还 可 以 接受 。 








我 们 希望 在 界面 中 展示 这 个 Product 。 为 了 让 产品 属性 在 模板 中 可 访问 ， 我 们 把 它们 添加 到 
组 件 的 实例 变量 中 。 
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比如 ， 如 果 和 希望 在 视图 中 访问 新 产品 newProduct ， 可 以 这 样 写 


class InventoryApp { 
product: Product; 


constructor() { 
let newProduct = new Product( 
"NICEHAT' , 
"A Nice Black Hat', 
'/resources/images/products/black-hat.jpg', 
['Men', 'Accessories', 'Hats'], 
29.99); 


this.product = newProduct; 
} 
} 


也 可 以 更 简洁 一 点 : 
class InventoryApp { 


product: Product; 


constructor() { 
this.product = new Product( 
"NICEHAT' , 
"A Nice Black Hat', 
'/resources/images/products/black-hat.jpg', 
['Men', 'Accessories', 'Hats'], 
29.99); 


. Sf rex UT = AES 


(1) 添加 了 一 个 constructor 。 当 Angular 创 建 这 个 组 件 的 实例 时 ， 会 调用 这 个 constructor。 
我 们 可 以 在 这 里 对 这 个 组 件 进 行 初始 化 。 

(2) 声明 了 一 个 实例 变量 。 当 我 们 在 InventoryApp 里 写 product : Product 的 时 候 ， 是 在 
InventoryApp 的 实例 中 定义 了 一 个 名 叫 product 的 属性 ， 用 于 保存 Product 对 象 。 


(3) #product 属性 赋值 了 一 个 Product 实例 。 在 constructor 中 ， 我 们 创建 了 一 个 Product 
的 实例 ， 并 把 它 赋 值 给 product 实 例 变 量 


Hi 





o 























3.4.4 用 模板 绑 定 来 查看 产品 
由 于 已 经 给 product 赋 了 值 ， 现 在 我 们 可 以 在 视图 中 使 用 这 个 变量 了 。 把 模板 修改 成 下 面 


@Component({ 
selector: 'inventory-app', 
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template: ^ 

«div classz"inventory-app"'» 
<ht>{{ product.name }}</h1> 
<span>{{ product.sku }}</span> 

</div> 


}) 
{{...}} 语 法 被 称 为 模板 绑 定 。 它 告诉 视图 ， 我们 希望 在 模板 的 这 个 位 置 使 用 花 括 号 中 表达 E 
式 的 值 。 

在 这 个 例子 中 ， 我 们 有 两 个 绑 定 : 


口 {{ product.name }} 
口 {{ product.sku }} 














product 变 量 来 自 于 InventoryApp 组 件 实例 中 的 实例 变量 product 。 

模板 绑 定 有 个 很 灵活 的 特性 : 花 括 号 中 的 内 容 是 一 个 表达 式 。 这 意味 着 你 可 以 像 下 面 这 样 写 
代码 : 
QO {{ count + 4 }} 
QO (( myFunction(myArguments) }} 


在 第 一 个 示例 中 ， 我 们 使 用 一 个 操作 符 改 变 了 count 的 显示 值 。 在 第 二 个 示例 中 ， 我 们 使 用 
myFunction(myArguments ) 函数 的 返回 值 来 作为 显示 内 容 。 使 用 模板 绑 定 标签 是 在 Angular 应 用 
中 展示 数据 的 主要 方式 。 






































3.4.5 添加 更 多 产品 
我 们 当然 不 希望 应 用 只 展示 一 个 产品 ; 实际 上 ， 我 们 希望 展示 一 个 完整 的 产品 列表 。 因 此 ， 
把 InventoryApp 中 的 一 个 Product 属 性 修改 为 Product 数 组 : 


class InventoryApp { 
products: Product[]; 














constructor() { 
this.products = []; 
} 
} 
注意 ,我们 还 把 producet 变 量 重 命名 为 products ， 并 且 把 类 型 改 为 了 Product [] 。 后 面 的 [] 
代表 我 们 和 希望 products 是 一 个 Product 数 组 。 也 可 以 把 它 写成 Array<Product> 。 


现在 InventoryApp 已 经 可 以 保存 多 个 Product 了 ， 我 们 在 构造 函数 中 多 创建 一 些 Product 。 

















code/how_angular_works/inventory_app/app.ts 


class InventoryApp { 
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products: Product[]; 


constructor() { 
this.products = [ 
new Product( 
'MYSHOES', 
'Black Running Shoes', 
'/resources/images/products/black-shoes. jpg', 
['Men', 'Shoes', 'Running Shoes'], 
109.99), 
new Product( 
"NEATOJACKET' , 
"Blue Jacket', 
'/resources/images/products/blue-jacket. jpg', 
['Women', 'Apparel', ‘Jackets & Vests'], 
238.99), 
new Product( 
"NICEHAT' , 
"A Nice Black Hat', 
'/resources/images/products/black-hat.jpg', 
['Men', 'Accessories', 'Hats'], 
29.99) 
]; 
j 


这 段 代 码 会 在 应 用 中 创建 一 些 产品 以 备 后 续 使 用 。 


3.4.6 ”选择 一 个 产品 





我 们 需要 应 用 支持 用 户 交 互 。 比 如 ， 用 户 可 能 会 希望 选择 一 个 特定 的 产品 来 查看 更 多 信息 ， 
或 者 把 它 加 入 购物 车 ， 等 等 。 


下 面 来 给 InventoryApp 定 义 一 个 新 方法 productWasSelected, 用 来 响应 用 户 对 产品 的 选择 























F 
o 


code/how angular works/inventory app/app.ts 


productWasSelected(product: Product): void { 
console.log('Product clicked: ', product); 


} 


3.4.7 Fi«products-1ist» 列 出 产品 





顶层 的 InventoryApp 组 件 已 经 有 了 , 现在 需要 创建 一 个 新 的 组 件 用 来 演 染 产品 列表 。 接 下 
来 ,我 们 会 实现 使 用 products-1ist 选 择 器 的 ProductsList 组 件 。 在 我 们 深入 实现 细节 之 前 ， 先 
看 看 如 何 使 用 它 。 











code/how_angular_works/inventory_app/app.ts 


@Component ( { 
selector: 'inventory-app', 
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template: ~ 
«div class="inventory-app"> 
«products-list 
[productList]-"products" 
(onProductSelected)-"productWasSelected($event)"» 
«/products-list» 
«/div» 





}) 


class InventoryApp { 
这 里 出 现 了 一 些 新 的 语法 和 配置 项 ， 我 们 来 逐一 说 明 。 
1. 输入 /输出 
使 用 products-list 组 件 时 ， 我 们 会 用 到 Angular 组 件 的 一 个 核心 特性 : 输入 /输出 。 
«products-list 
[productList]-"products" «1— input —-> 


(onProductSelected)-"productWasSelected($event)"» «!-- output ——> 
«/products-list» 


方 括号 [] 用 来 传递 和 输入 ， 圆 括号 ( ) 用 来 处 理 输出 。 

数据 通过 输入 绑 定 流入 你 的 组 件 ， 事件 通过 输出 绑 定 流出 你 的 组 件 。 
可 以 将 输入 与 输出 绑 定 理解 为 对 组 件 定 义 了 一 组 公有 API。 

2. 方 括号 传递 输入 

在 Angular 中 ， 你 可 以 通过 和 输入 把 数据 传人 组 件 。 

在 我 们 的 代码 中 有 一 段 : 


«products-list 
[productList]-"products" 


这 就 是 在 使 用 ProductsList 组 件 的 输入 。 
可 能 products 和 productList 有 点 难以 理解 。 这 个 元 素 属 性 (attribute ) 分 为 两 个 部 分 : 
O [productList] (= 号 左边 ) 
O "products" (= 号 右边 ) 

左边 的 [productList] 是 指 ， 我 们 希望 在 product-1ist 组 件 中 设置 名 为 productList 的 输 
Ao 

右边 的 "products" 是 指 ， 我 们 希望 将 输入 设置 为 products 表 达 式 的 值 ， 即 InventoryApp 类 
中 的 this. products。 
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e 你 可 能 会 问 :“ 我 怎么 知道 productList 是 product-list 组 件 的 一 个 合法 输入 
Je? ”答案 是 : 需要 阅读 这 个 组 件 的 相关 文档 。inputs (输入 ) 和 outputs ( 输 

出 ) 是 这 个 组 件 “ 公 开 API” 的 一 部 份 。 
你 可 以 像 弄 清 一 个 函数 有 哪些 参数 一 样 来 弄 清 一 个 组 件 支持 哪些 输入 。 

3. 圆 括 号 处 理 输出 

在 Angular 中 ， 使 用 输出 来 将 数据 传递 出 组 件 。 

在 我 们 的 代码 中 有 一 段 : 

«products-list 


(onProductSelected)-"productWasSelected($event)"» 














意思 是 我 们 要 监听 ProductsList 组 件 的 onProductSelected 输 出 。 
岂 就 是 说 : 
口 (onProductSelected) ， 即 = 号 左边 是 我 们 要 监听 的 输出 的 名 称 ; 


O "productWasSelected", ， 即 = 号 右边 是 当 有 新 的 输入 时 我 们 想 要 调用 的 方法 ; 
O $event 在 这 里 是 一 个 特殊 的 变量 ， 用 来 表示 输出 的 内 容 。 


到 目前 为 止 , 我 们 还 没有 讨论 过 如 何在 组 件 中 定义 输入 和 输出 。 别 急 ,我 们 很 快 就 会 在 定义 
ProductsList 组 件 时 提 到 这 一 点 。 


4. 完整 的 InventoryApp 代 码 清单 


下 面 是 InventoryApp 组 件 的 完整 代码 清单 。 



































code/how_angular_works/inventory_app/app.ts 


@Component ( { 
selector: 'inventory-app', 
template: ^ 
«div class="inventory-app"> 
«products-list 
[productList]="products" 
(onProductSelected )="productWasSelected($event) "> 
«/products-list» 
«/div» 


}) 
class InventoryApp { 
products: Product[]; 


constructor() { 
this.products = [ 

new Product( 

'MYSHOES', 
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"Black Running Shoes', 
'/resources/images/products/black-shoes. jpg', 
['Men', 'Shoes', ‘Running Shoes'], 
109.99), 

new Product( 
"NEATOJACKET' , 
"Blue Jacket', 
'/resources/images/products/blue-jacket.jpg', 
['Women', 'Apparel', 'Jackets & Vests'], 
238.99), 

new Product( 
"NICEHAT' , 
"A Nice Black Hat', 
'/resources/images/products/black-hat. jpg', 
['Men', 'Accessories', 'Hats'], 
29.99) 





]5 
} 


productWasSelected(product: Product): void { 
console.log('Product clicked: ', product); 


} 
} 


3.5 ”产品 列表 组 件 


我 们 已 经 有 了 顶层 应 用 组 件 ， 现 在 是 时 候 编 写 用 来 展示 产品 列表 的 ProductsList 组 件 了 。 
我 们 希望 只 允许 用 户 选 中 一 个 Product ， 还 希望 可 以 知道 哪个 Product 是 用 户 当 前 选中 的 。 
ProductList 组 件 是 做 这 件 事 的 绝 佳 场 所 ， 因 为 它 同 时 “知道 ”所 有 的 Product 。 
让 我 们 分 三 步 把 ProductsList 组 件 写 完 : 
D 设置 ProductsList 的 @Component 配 置 项 ; 
口 编写 ProductsList 的 控制 器 类 ; 
口 编写 ProductList 的 视图 模板 。 



































3.5.1 设置 ProductsList BJeComponent 配置 项 
我 们 来 看 看 ProductsList 的 @Component 配 置 。 





code/how_angular_works/inventory_app/app.ts 


/** 
* @ProductsList: A component for rendering all ProductRows and 
* Storing the currently selected Product 
*/ 
@Component( { 
selector: 'products-list', 
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inputs: ['productList'], 
outputs: ['onProductSelected'], 
template: ^ 





在 ProductsList 组 件 代 码 中 ， 最 开始 是 我 们 熟悉 的 selector 选 择 需 配置 项 。 这 个 选择 器 表 
示 我 们 可 以 通过 在 代码 中 放置 cproducts-listy> 标 签 来 使 用 ProductsList 组 件 。 


代码 中 还 有 两 处 inputs 和 outputs 配 置 项 。 














3.5.2 组件 的 输入 


我 们 可 以 用 inputs 配 置 项 来 指定 组 件 希 望 接收 哪些 参数 。inputs 接 收 一 个 字符 串 数 组 ， 用 
来 指定 输入 的 键 〈 名 称 )。 

当 我 们 为 组 件 指定 了 一 个 输入 时 , 这 个 组 件 的 定义 类 就 一 定 要 有 一 个 实例 属性 来 接收 这 个 输 
入 的 值 。 例 如 ， 假 设 我 们 有 以 下 代码 : 





@Component ( { 
selector: 'my-component', 
inputs: ['name', 'age'] 


}) 

class MyComponent { 
name: string; 
age: number; 


} 
name 和 age 输入 分 别 对 应 于 Mycomponent 类 的 实例 中 的 name 和 age 属性 。 


指定 组 件 接收 一 个 输入 参数 的 另 一 种 方式 是 使 用 eInput 注 解 。 你 可 以 先导 和 Input ， 然 后 把 
@Input( ) 添 加 到 属性 声明 上 ， 代 码 如 下 : 


@Component ( { 
selector: 'my-component' 

}) 

class MyComponent { 
GInput() name: string; 
GInput() age: number; 


} 


如 果 我 们 要 让 该 输入 属性 的 内 外 名 字 不 一 样 ， 可 以 这 样 写 : @Input('firstname') name: 
String; 。 但 是 “Angular 风 格 指南 ” "建议 避免 这 种 方式 。 
































你 可 以 任意 选择 这 两 种 方式 之 一 来 提供 输入 属性 ， 它 们 的 效果 是 一 样 的 。 在 本 
章 中 ， 我 们 将 使 用 inputs: [] 风 格 ， 而 其 他 章节 中 则 使 用 aeInput() 风 格 。 





(D https://angular.io/docs/ts/latest/guide/style-guide.html 
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如 果 想 使 用 其 他 模板 中 的 MyComponent ， 就 可 以 这 样 写 : 


«my-component [name]="myName" [age]="myAge"></my—component> , 


Mp 
EI 














不 一 定 要 保持 一 致 。 











比如 ,假如 我 们 希望 标签 元 素 的 属性 和 组 件 实例 中 的 属性 使 用 不 同 的 名 称 。 也 就 是 说 ,假如 E 


我 们 希望 这 个 组 件 看 起 来 像 这 样 : 
«my-component [shortName]="myName" [oldAge]-"myAge"»«/my-component» 


那么 可 以 这 样 修改 inputs 配 置 项 的 字符 串 格式 : 








@Component ( { 
selector: 'my-component', 
inputs: ['name: shortName', 'age: oldAge'] 


}) 

class MyComponent { 
name: string; 
age: number; 


} 


一 般 而 言 ，inputs 输 入 字符 串 列表 可 以 使 用 'componentProperty: 


( ' 组 件 实例 属性 : 标签 元 素 属 性 ' ) 的 格式 。 
例如 ， 我 们 可 以 像 这 样 写 一 个 组 件 : 


@Component({ 
T4 
inputs: ['name', 'age', 'enabled'] 
A PT 
}) 
class MyComponent { 
name: string; 
age: number; 
enabled: boolean; 


} 





意 , name 属 性 对 应 name 输 入 ,也 恰好 与 MyComponent 中 的 name 属 性 对 应 。 不 过 这 些 名 称 并 








exposedProperty' 


然而 ， 如 果 我 们 希望 组 件 实 例 属性 enabled 在 组 件 标 签 中 对 应 的 标签 元 素 属性 名 称 为 








isEnabled ， 就 可 以 使 用 上 面 提 到 的 这 个 语法 : 


@Component({ 
Lis 
inputs: [ 
"name: name', 
"age: age', 
'isEnabled: enabled' 
] 
Jf 
}) 


class MyComponent { 
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name: string; 
age: number; 
isEnabled: boolean; 


} 
进一步 说 ,由 于 只 有 一 个 属 | 


@Component ( { 
eles 
inputs: ['name', 
demus 

}) 


class MyComponent { 
name: string; 
age: number; 
isEnabled: boolean; 


} 
在 inputs 输 入 数组 中 ， 当 字符 串 的 值 是 key: value (4: 值 ) 格式 的 时 候 ， 含义 如 下 : 


口 键 (name 、age 和 isEnabled ) 表示 要 输入 的 属性 在 控制 器 看 来 如 何 ( 被 绑 定 ) ; 
O 值 (name 、age 和 enabled ) 表示 属性 在 外 界 看 来 如 何 。 











性 需要 明确 指定 从 enabled 映 射 到 isEnabled， 我 们 可 以 继续 简化 : 





'age', 'isEnabled: enabled' ] 

















通过 inputs 配 置 项 传递 products 
你 应 该 还 记得 ， 在 InventoryApp 中， 我 们 通过 [productList] 输 入 将 products 传 到 了 


products-list 组 件 中 。 





code/how_angular_works/inventory_app/app.ts 


/** 
x @InventoryApp: the top-level component for our application 
*/ 
@Component ( { 
selector: 'inventory-app', 
template: ^ 


«div class="inventory-app"> 
«products-list 
[productList]="products" 
(onProductSelected )="productWasSelected($event)"> 
«/products-list» 
«/div» 


}) 


class InventoryApp { 
products: Product[]; 


constructor() { 
this.products = [ 


希望 你 现在 理解 了 : 在 上 面 的 代码 中 ,我 们 是 通过 ProductsList 组 件 类 的 一 个 输入 参数 将 


this.products 传 进去 的 。 
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3.5.8 组 件 的 输出 


如 果 要 从 组 件 中 把 数据 传递 出 去 ， 应 该 使 用 输出 绑 定 。 
假如 我 们 要 编写 有 一 个 按钮 的 组 件 ， 并 且 和 希望 在 这 个 按钮 被 点 击 的 时 候 做 点 什么 。 
想 实 现 这 一 点 ， 只 要 把 组 件 控制 器 中 的 一 个 方法 绑 定 到 按钮 的 点 击 输出 就 可 以 了 。 写 法 是 


(output )="action'" 。 
下 面 是 一 个 计数 需 的 例子 ， 点 击 按钮 的 时 候 可 以 对 计数 需 进 行 增加 或 减少 的 操作 。 


@Component ( f 
selector: 'counter', 
template: ~ 
{{ value }} 
«button (click)="increase()">Increase</button> 
«button (click)="decrease()">Decrease</button> 























}) 
class Counter { 
value: number; 


constructor() { 
this.value = 1; 


} 


increase() { 
this.value = this.value + 1; 
return false; 


} 


decrease() { 
this.value = this.value - 1; 
return false; 
j 
j 


在 这 个 例子 中 ， 我 们 和 希望 每 次 点 击 第 一 个 按钮 的 时 候 ， 调 用 控制 需 中 的 increase( ) 方 法 。 
同样 ， 每 次 点 击 第 二 个 按钮 的 时 候 ， 我 们 希望 调用 decrease( ) 方 法 。 

圆 括号 属性 的 语法 是 这 样 的 : (output)="action"。 这 个 例子 中 , 我 们 是 在 监听 按钮 的 cl ick 
事件 。 还 有 很 多 内 置 的 事件 可 以 监听 ， 如 mousedown 、mousemove 、db1l-click 等 。 

这 个 例子 中 ， 事 件 是 组 件 内 置 的 。 当 我 们 编写 自己 的 组 件 时 ， 可 以 暴露 “公开 事件 ”( 组 件 
的 outputs ) 来 和 组 件 外 部 通信 。 

这 里 要 理解 的 关键 是 ， 在 视图 中 ， 我 们 可 以 使 用 (output )="action" 语 法 来 监听 事件 。 
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3.5.4 ”触发 自 定义 事件 

上 面 例子 中 的 cl ick 和 mousedown 等 是 按钮 内 置 的 事件 ， 现 在 我 们 要 来 创建 一 个 可 以 触发 自 
定义 事件 的 组 件 。 自 定义 输出 ， 我 们 需要 做 三 件 事 : 

(1) 在 @Component 配 置 中 ， 指 定 outputs 配 置 项 ; 

(2) 在 实例 属性 中 ,设置 一 个 EventEmitter (事件 触发 器 ); 

(3) 在 适当 的 时 候 ， 通 过 EventEmitter 触 发 事件 。 




















可 能 你 对 EventEmitter 还 不 大 熟悉 ， 不 过 别 担 心 ， 它 并 不 难 。 
EventEmitter 只 是 一 个 帮 你 实现 观察 者 模式 "的 对 象 。 也 就 是 说 ， 它 是 一 个 管 
理 一 系列 订阅 者 并 向 其 发 布 事件 的 对 象 。 就 是 这 么 简单 。 

来 看 一 个 使 用 EventEmitter 的 简单 小 例子 : 


let ee = new EventEmitter(); 
ee.subscribe((name: string) => console.log(^Hello ${name}>)); 
ee.emit("Nate"); 


// —» "Hello Nate" 

当 我 们 把 一 个 EventEmitter 赋 值 给 一 个 输出 的 时 候 ， Angular 会 自动 帮 我 们 订 
阅 事件 。 我 们 不 需要 自己 订阅 。( 当然 ， 如 果 需 要 ， 你 仍然 可 以 实现 自己 的 订阅 
3E BEL) 





下 面 是 一 段 具 有 outputs 的 组 件 示 例 代 码 : 


@Component ( { 
selector: 'single-component', 
outputs: ['putRingOnIt'], 
template: ~ 
«button (click)="liked()">Like it?</button> 


}) 
class SingleComponent { 
putRingOnIt: EventEmitter<string>; 


constructor() { 
this.putRingOnIt = new EventEmitter(); 
} 


liked(): void { 
this. putRingOnIt.emit("oh oh oh"); 
} 
} 





(D https://en.wikipedia.org/wiki/Observer_pattern 
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可 以 看 到 我 们 做 了 完整 的 三 步 动 作 : (1) 指定 outputs 配 置 项 ; (2) 创建 一 个 EventEmitter 并 





把 它 赋 值 给 我 们 指定 的 输出 属性 putRingonIt; (3) 当 liked 方 法 被 调用 时 ， 触 发 这 个 事件 。 











如 果 和 希望 在 一 个 父 级 组 件 中 使 用 这 个 输出 ， 可 以 这 样 做 : 


@Component ( f 
selector: 'club', 
template: ~ NN 
«div» 
«single-component 
(putRingOnIt)-"ringWasPlaced($event)" 
»«/single-component» 
«/div» 





}) 
class ClubComponent { 
ringWasPlaced(message: string) { 
console.log(*Put your hands up: ${message}>); 


} 
} 


// logged -» "Put your hands up: oh oh oh" 
再 来 回顾 一 下 : 
口 putRingOnIt 是 在 SingleComponent 的 outputs 配 置 项 中 定义 的 ; 


口 ringWasPlaced 是 ClubComponent 中 的 一 个 方法 ; 
口 $event 包 含 被 触发 事件 参数 (输出 的 内 容 )， 在 这 个 例子 中 是 一 个 字符 串 。 


























3.5.5 445 ProductsList 的 控制 器 类 








回 到 商店 的 例子 ，ProductsList 控 制 器 类 需要 三 个 实例 变量 : 


口 一 个 用 来 保存 产品 列表 (来自 于 productList 输入 ); 
口 一 个 用 来 输出 事件 ( 由 onProductSelected 触 发 ); 
口 一 个 用 来 保存 当前 选中 产品 的 引用 。 


下 面 是 实现 方法 。 


code/how_angular_works/inventory_app/app.ts 














class ProductsList { 


/** 
* @input productList - the Product[] passed to us 
*/ 
productList: Product[]; 
/** 
* Gouput onProductSelected - outputs the current 
* Product whenever a new Product is selected 


*/ 
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onProductSelected: EventEmitter«Product»; 


/** 

* @property currentProduct - local state containing 
* the currently selected ~Product~ 

*/ 


private currentProduct: Product; 


constructor() { 
this.onProductSelected - new EventEmitter(); 


} 
可 以 看 到 ， 我 们 的 productList 是 一 个 Product 类 型 的 数组 ， 它 来 自 于 inputs。 
onProductSelected 是 我 们 的 输出 。 


currentProduct 是 ProductsList 的 一 个 内 部 属性 。 你 可 能 知道 它 有 时 候 被 称 作 “ 组 件 本 地 
状态 "。 它 仅 在 组 件 的 内 部 才能 用 到 。 






































3.5.6 ”编写 ProdctsList 的 视图 模板 





下 面 是 products-1ist 组 件 的 template。 


code/how_angular_works/inventory_app/app.ts 


template: ^ 
«div class="ui items"» 
«product-row 
*ngFor="let myProduct of productList" 
[product ]="myProduct" 
(click)='clicked(myProduct) ' 
[class.selected]-"isSelected(myProduct)"» 
«/product-row» 
«/div» 


这 里 用 到 了 ProdquctRow 组 件 的 product-row 标 签 。 我 们 稍 后 就 来 定义 它 。 























我 们 用 ngFor 来 迭代 productsList 中 的 每 个 Product。 本 书 前 面 讨论 过 ngFor, 但 现在 还 是 提 
WÉ— PF, let thing of things 语 法 是 指 ， 壕 代 things 中 的 每 一 个 元 素 ， 复 制 并 把 它 赋 值 到 变量 


thing 中 去 。 
因此 ， 我 们 在 这 个 例子 中 迭代 了 productList 中 的 Products ， 并 为 每 一 个 元 素 生 成 一 个 


myProduct 变 量 。 





从 代码 风格 的 角度 ， 我 不 会 在 真实 应 用 中 把 这 个 变量 命名 为 myProduct ， 而 是 
把 它 叫 作 product 甚 至 p。 但 为 了 把 意思 表达 得 更 明确 ， 我 认为 myProduct 不 太 
容易 引起 歧义 。 
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意思 的 是 , 我 们 甚至 可 以 在 同一 个 标签 中 使 用 这 个 myProduct 变 量 。 可 以 看 到 , 接 下 来 的 
三 行 代码 里 我 们 就 是 这 么 做 的 。 


[product]="myProduct" 是 指 我 们 要 把 myProduct ( 局 部 变量 ) 传递 给 product-row 的 
product 输 入 。( 我 们 会 在 下 面 定 义 ProductRow 组 件 的 时 候 定 义 这 个 输入 。) 


(click)='clicked(myProduct)' 表 示 当 元 素 被 点 击 的 时 候 我 们 希望 做 什么 click 是 一 个 内 























事件 ， 当 点 击 宿主 元 素 的 时 候 就 会 触发 。 在 这 个 例子 中 ， 当 点 击 此 元 素 时 ， 就 


ProductsList 的 clicked 方 法 。 








会 执行 


[class.selected]="isSelected(myProduct)" 很 有 意思 : Angular 允 许 我 们 通过 这 种 语法 来 
根据 不 同 的 情况 设置 元 素 的 class 属 性 。 这 |: TRANE 意思 是 “如 果 isSelected(myProduct ) 返 回 
true, 就 给 元 素 的 CSS 类 增加 一 个 selected 类 ”。 如 果 需 要 标记 出 当前 选中 的 产品 , 这 会 非常 好 用 。 
你 可 能 已 经 注意 到 了 ， 我们 还 没有 定义 cl icked 和 isSselected 方 法 ,那么 现在 就 开始 吧 (在 




















1. clicked 


code/how_angular_works/inventory_app/app.ts 


clicked(product: Product): void { 
this.currentProduct = product; 
this.onProductSelected.emit(product); 
j 


该 函数 会 做 两 件 事 : 
(1) 把 this .currentProduct 设 置 为 传人 的 Product; 
(2) 将 用 户 点 击 的 Product 从 输出 中 传 出 去 。 


2. isSelected 








code/how_angular_works/inventory_app/app.ts 


isSelected(product: Product): boolean { 
if (!product || !this.currentProduct) { 
return false; 
} 
return product.sku === this.currentProduct.sku; 


} 


这 个 方法 接收 一 个 Product。 如 果 这 个 product 的 sku 与 currentProduct 的 sku 一 样 ， 就 返回 
true; 否则 返回 false。 


3.5.7 ”完整 的 ProductsList 组 件 

















下 面 是 一 份 完整 的 代码 清单 ， 我 们 可 以 看 到 代码 的 所 有 上 下 文 。 
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code/how_angular_works/inventory_app/app.ts 


/** 
* @ProductsList: A component for rendering all ProductRows and 
* Storing the currently selected Product 


*/ 
@Component ( { 
selector: 'products-list', 
inputs: ['productList'], 
outputs: ['onProductSelected'], 
template: ^ 


«div class="ui items"» 

«product-row 
*ngFor="let myProduct of productList" 
product ]="myProduct" 
(click)='clicked(myProduct) ' 
class.selected]="isSelected(myProduct )"> 

«/product-row» 

«/div» 

}) 


class ProductsList { 





/** 
* @input productList - the Product[] passed to us 
*/ 
productList: Product[]; 
/ 
* @ouput onProductSelected - outputs the current 
* Product whenever a new Product is selected 
*/ 
onProductSelected: EventEmitter«Product»; 
/** 
* @property currentProduct - local state containing 
* the currently selected ~Product~ 
*/ 


private currentProduct: Product; 


constructor() { 
this.onProductSelected - new EventEmitter(); 


} 


clicked(product: Product): void { 
this.currentProduct = product; 
this.onProductSelected.emit(product); 


} 


isSelected(product: Product): boolean { 
if (!product || !this.currentProduct) { 
return false; 


} 


return product.sku === this.currentProduct.sku; 


} 
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3.6 产品 条 目 组 件 


ProductRow 组 件 用 于 展示 Product ( 如 图 3-9 所 示 )。ProductRow 有 自己 的 模板 ， 但 也 会 被 分 
成 三 个 更 小 的 组 件 : 


口 ProductImage ， 用 来 展示 图 片 ; SEM 
O ProductDepartment, ， 用 来 展示 产品 分 类 “面包 居 导 航 ”; 
口 PriceDisplay, 用 来 展示 产品 价格 。 











Blue Jacket $238.99 
SKU #NEATOJACKET 
Women > Apparel > Jackets & Vests 


图 3-9 一 个 被 选中 的 ProductRow 组 件 
可 以 在 图 3-10 中 看 到 这 三 个 组 件 在 ProductRow 中 的 使 用 。 


Blue Jacket 


SKU #NEATOJACKET 


Women > Apparel > Jackets & Vests PriceDisplay 


Productimage 
3-10 ”ProductRow 的 子 组 件 





下 面 来 看 看 ProductRow 的 组 件 配置 、 定 义 类 和 模板 。 


3.6.1 产品 条 目的 组 件 配置 


code/how_angular_works/inventory_app/app.ts 


/** 
* @ProductRow: A component for the view of single Product 
*/ 
@Component({ 
selector: 'product-row', 
inputs: ['product'], 
host: {'class': 'item'], 
template: ^ 


配置 开头 定义 了 product-row 的 selector。 我 们 已 经 多 次 看 到 这 个 配置 项 了 ,这 个 定义 说 明 
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组 件 会 匹配 product-row 标 签 。 





接 下 来 ,我 们 定义 了 一 个 名 为 product 的 输入 。 这 个 输入 就 是 


























父 级 组 件 传人 的 Product。 
第 三 个 配置 项 host 让 我 们 可 以 在 宿主 元 素 上 配置 元 素 属 性 。 在 这 个 例子 中 ， 我 们 设置 了 


Semantic UI 的 item 样 式 "。host:{'class':'item'} 的 意思 是 ， 我 们 希望 给 宿主 元 素 添加 一 个 名 
为 item 的 CSS 类 。 





























O host 配 置 项 很 有 用 ， 因 为 可 以 在 组 件 内 部 配置 宿主 元 素 。 否 则 必须 在 宿主 元 素 
的 HTML 标签 中 定义 CSS 等 ; 这 样 , 每 次 使 用 该 组 件 时 , 都 需要 手工 编写 CSS 类 ， 
用 起 来 就 不 方便 了 。 


我 们 稍 后 就 会 讨论 template 模 板 。 


3.6.2 ”产品 条 目 组 件 的 定义 类 
ProductRow 组 件 的 定义 类 很 简明 。 


code/how_angular_works/inventory_app/app.ts 
class ProductRow { 
product: Product; 


} 





这 里 我 们 定义 ProductRow 会 有 一 个 实例 属性 product 。 因 为 我 们 定义 了 一 个 输入 product 


所 以 每 当 Angular 创 建 这 个 组 件 的 实例 时 , 都 会 自动 帮 有 我们 设置 好 product 。 我 们 不 需要 手动 去 做 
也 不 需要 constructor。 








3.6.3 ”产品 条 目 组 件 的 template 
现在 来 看 看 temp late. 


code/how_angular_works/inventory_app/app.ts 
template: ^ 


«product-image [product]-"product"»«/product-image» 
«div class="content"> 


«div class="header">{{ product.name }}</div> 
«div class="meta"> 


«div class-"product-sku"»SKU #{{ product.sku }}</div> 
«/div» 


«div class="description"> 


«product-department [product]-"product"»«/product-department» 
«/div» 





® http://semantic-ui.com/views/item.html 
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</div> 
«price-display [price]-"product.price"»«/price-display» 


我 们 的 模板 中 没有 什么 新 概念 。 


第 一 行使 用 了 product-image 指 令 ， 并 把 我 们 的 product 传 递 到 ProductImage 组 件 的 
product 输 入 中 。 我 们 使 用 product-department 指 令 时 也 是 一 样 。 E 


price-display 指 令 的 用 法 略 有 不 同 : 我 们 没有 直接 传递 product , 而 是 传递 了 product price. 
剩 下 的 模板 只 是 带 有 自 定 义 CSS 样 式 和 一 些 模板 绑 定 的 标准 HTML 元 素 。 








3.6.4 完整 的 ProductRow 代码 清单 


下 面 是 ProductRow 组 件 的 全 部 代码 。 

















code/how_angular_works/inventory_app/app.ts 


/** 
* @ProductRow: A component for the view of single Product 
*/ 
@Component({ 
selector: 'product-row', 
inputs: ['product'], 
host: {'class': 'item'], 
template: ^ 


«product-image [product]-"product"»«/product-image» 
«div class="content"> 
«div class="header">{{ product.name }}</div> 
«div class="meta"> 
«div class-"product-sku"»SKU #{{ product.sku }}</div> 
«/div» 
«div class="description"> 
«product-department [product]-"product"»«/product-department» 
«/div» 
«/div» 
«price-display [price]-"product.price"»«/price-display» 
}) 
class ProductRow { 
product: Product; 


} 
现在 来 看 看 我 们 用 到 的 三 个 组 件 ， 其 代码 都 很 短 。 








3.7 ”产品 图 片 组 件 
首先 看 看 ProductImage。 
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code/how_angular_works/inventory_app/app.ts 
/** 
* @ProductImage: A component to show a single Product's image 
*/ 
@Component ( { 
selector: 'product-image', 
host: {class: 'ui small image'}, 
inputs: ['product'], 
template: ^ 
«img class-"product-image" [src]-"product.imageUrl"» 


}) 
class ProductImage { 
product: Product; 


} 
这 里 唯一 需要 注意 的 是 img 标 签 ， 请 看 看 我 们 是 怎么 使 用 img 中 的 [src] 的 。 
我 们 本 来 可 以 这 么 写 : 


<!-- wrong, don't do it this way --» 
<img src="{{ product.imageUrl }}"> 


为 什么 这 样 写 是 错 的 ”因为 如 果 浏 览 器 在 Angular 运 行 起 来 之 前 就 加 载 了 这 段 模板 ， 就 会 尝 
试 以 字符 串 {{ product. imageUr1 }} 为 url 来 加 载 图 片 , 这 当然 会 得 到 一 个 “404 not found” Hix. 
























































在 Angular 运 行 起 来 之 前 ， 浏 览 器 会 在 页 面 上 显示 一 个 破损 的 图 像 。 








通过 [src] 元 素 属 性 , 我 们 告诉 Angular 我 们 和 希望 使 用 img 标 签 的 [src] 输入 。 一 旦 表达 式 的 值 























解析 完成 ，Angular 就 会 把 src 元 素 属性 替换 为 表达 式 的 值 。 





3.8 价格 展示 组 件 


下 面 来 看 看 PriceDisplay 组 件 。 


code/how_angular_works/inventory_app/app.ts 


/** 
* @PriceDisplay: A component to show the price of a 
* Product 
*/ 
@Component ( f 
selector: 'price-display', 
inputs: ['price'], 
template: ^ 


«div class="price-display">\${{ price }}</div> 


}) 
class PriceDisplay { 
price: number; 


} 
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这 非常 浅显 ， 但 要 注意 一 点 ， 因 为 在 模板 字符 串 中 $ 是 用 于 模板 变量 的 特殊 语法 ， 所 以 在 模 
板 中 出 现 $ 的 写法 时 要 进行 转 义 。 


3.9 产品 分 类 组 件 


最 后 是 ProductDepartment 组 件 。 




















code/how_angular_works/inventory_app/app.ts 


/** 
* @ProductDepartment: A component to show the breadcrumbs to a 
* Product's department 


*/ 
@Component( { 
selector: 'product-department', 
inputs: ['product'], 
template: ` 


<div class="product-department"> 
«span xngFor="let name of product.department; let i=index"> 
<a href="#">{{ name }}</a> 
<span> {{i < (product.department.length-1) ? '>' : ''}}</span> 
</span> 
</div> 


}) 
class ProductDepartment { 
product: Product; 


} 
这 里 要 说 明 一 下 ProductDepartment 组 件 中 的 ngFor 和 span 标 签 。 


我 们 使 用 了 ngFor 来 迭代 product .department 中 的 每 个 分 类 , 并 赋值 给 name。 比 较 新 鲜 的 写 
法 是 第 二 个 表达 式 let i=index。 这 是 在 ngFor 中 取得 迭代 序号 的 方法 。 


在 span 标 签 中 ， 我 们 使 用 变量 i 来 判断 是 否 需 要 显示 大 于 号 >。 
我 们 希望 像 这 样 展示 分 类 : 


Women > Apparel > Jackets & Vests 



























































表达 式 {{i < (product.department.length-1) ? '>，:''}} 意 味 着 ， 只 要 不 是 最 后 一 级 
分 类 ， 就 显示 一 个 '、>' 号 ; 如 果 是 最 后 一 级 分 类 ， 就 显示 一 个 空 字符 


wt 
o 





ao 








O 格式 test ? valuelfTrue : valueIfFalse 被 称 作 三 元 操作 符 。 
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3.10 创建 NgModule 并 启动 应 用 
最 后 要 做 的 就 是 创建 NgModule 并 启动 应 用 。 





























code/how_angular_works/inventory_app/app.ts 
@NgModule( { 
declarations: [ 
InventoryApp, 
ProductImage, 
ProductDepartment, 
PriceDisplay, 
ProductRow, 
ProductsList 
] 


imports: [ BrowserModule ], 
bootstrap: [ InventoryApp ] 


}) 
class InventoryAppModule {} 


为 了 帮助 我 们 组 织 代 码 ，Angular 提 供 了 一 个 模块 化 系统 。AngularJS 中 的 所 有 指令 本 质 上 都 
是 全 局 的 ， 但 在 Angular 中 必须 明确 指出 你 打算 在 应 用 中 使 用 哪些 组 件 。 


虽然 使 用 模块 系统 需要 更 多 的 配置 ,但 对 于 较 大 型 的 应 用 来 说 ， 这 能 避免 很 大 的 麻烦 。 


要 使 用 你 在 Angular 中 创建 的 新 组 件 ， 它 们 必须 对 于 当前 模块 是 可 访问 的 。 也 就 是 说 ， 如 果 
我 们 要 在 IntentoryApp 的 template 中 通过 products-list 标 签 使 用 ProductsList 组 件 的 话 ， 就 
要 保证 InventoryApp 满 足下 面 的 两 个 条 件 之 一 : 


(1) 和 ProductsList 组 件 在 同一 个 模块 中 ; 
(2) InventoryApp 所 在 的 模块 导入 (imports ) 了 ProductsList 所 在 的 模块 。 






























































Q, 记 住 : 如 果 要 在 模板 中 使 用 ， 每 一 个 组 件 都 必须 在 同一 个 NgModule 中 声明 。 


在 这 个 例子 里 ， 我 们 将 InventoryApp 、ProductsList 和 应 用 中 的 所 有 其 他 组 件 都 放 在 了 同 
一 个 模块 中 。 这 样 写 容易 理解 ， 因 为 它们 彼此 之 间 都 是 “可 见 ” 的 。 
注意 ， 我 们 告诉 NgModule 要 以 InventoryApp 来 启动 (bootstrap )。 这 就 是 说 InventoryApp 
会 是 顶层 组 件 。 
因为 我 们 编写 的 是 浏览 器 应 用 , 所 以 也 把 浏览 器 模块 BrowserModule 放 到 这 个 NgModule 的 导 
人 列表 imports 里 。 

















Q, 要 了 解 NgModule 的 更 多 细节 ， 请 参考 8.10 节 。 
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局 动 应 用 


我 们 现在 编写 的 是 一 个 没有 用 到 AoT 预 编译 技术 ( “ahead-of-time”compilation ， 本 书后 面 会 
有 详细 讲解 ) 的 浏览 器 应 用 。 想 启动 应 用 就 要 像 下 面 这 样 做 。 


code/how_angular_works/inventory_app/app.ts 




















platformBrowserDynamic().bootstrapModule(InventoryAppModule); 





3.11 完整 的 项 目 





现在 我 们 已 经 有 了 让 项 目 运 行 起 来 的 所 有 部 分 ! 
全 部 完成 后 ， 应 用 看 起 来 应 该 如 图 3-11 所 示 。 





e e B ng-book 2: Inventory App x W — ng-book 





€ CŒ | [5 localhost:8080 pj = 





o ngbook2 Angular 2 Inventory App 


Black Running Shoes 


$109.99 
e SKU #MYSHOES 
~ 
^N Men » Shoes » Running Shoes 
Sa 一 

Blue Jacket $238.99 

SKU #NEATOJACKET 

Women > Apparel > Jackets & Vests 

ANice Black Hat $29.99 


SKU #NICEHAT 


O 


Men > Accessories > Hats 











图 3-11 ”完成 后 的 应 


uu 








Q, 完整 的 代码 可 以 在 how _angular works/inventory app 里 找到 ,参考 其 中 的 README. 


现在 你 可 以 通过 点 击 来 选中 一 个 特定 的 产品 了 ， 选 中 时 会 在 外 面 显示 一 个 漂亮 的 紫色 边框 。 
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如 果 你 在 代码 中 添加 了 新 的 Product ， 它 们 也 会 在 页 面 中 展示 出 来 。 


3.12 ”关于 数据 架构 的 一 点 说 明 


你 可 能 想 知 道 ， 如 果 开始 给 应 用 添加 更 多 功能 ， 该 如 何 管理 数据 流 呢 ? 
例如 ， 假 设 我 们 要 加 入 一 个 购物 车 界面 以 便 添加 和 购买 商品 。 这 该 如 何 实现 呢 ? 


目前 唯一 讨论 过 的 方案 就 是 触发 输出 事件 。 要 在 点 击 “ 添 加 到 购物 车 ”按钮 时 直接 把 
addedToCart 事 件 冒 泡 上 去 ， 然 后 在 根 节 点 处 理 吗 ?这 种 做 法 有 点 怪 。 


数据 架构 是 一 个 庞大 的 主题 ， 其 中 存在 很 多 不 同 的 观点 。 幸 和 运 的 是 ，Angular 可 以 广泛 适应 
各 种 数据 架构 ， 但 这 也 意味 着 你 需要 自己 选择 一 种 。 


在 AngularJS 中 ， 默 认 选 项 是 双向 绑 定 。 双 向 绑 定 在 开发 的 起 步 阶 段 非常 好 用 : 控制 器 保存 
数据 ， 表 单 直接 修改 数据 ， 视 图 显示 数据 。 

不 过 双向 绑 定 的 问题 是 , 它 经 常 导致 整个 应 用 出 现 级 联 效 应 。 随 着 项 目 规模 的 扩大 , 我 们 会 
越 来 越 难于 追踪 数据 的 流向 。 

双向 绑 定 的 另 一 个 问题 是 ， 由 于 我 们 的 数据 要 通过 组 件 下 发 ,一般 情 况 下 “数据 结构 树 ” 将 
不 得 不 与 “DOM 结 构 树 ”相对 应 。 但 在 实践 中 ， 最 好 把 这 两 件 事 分 开 。 


处 理 这 种 情况 的 方法 之 一 是 创建 数据 服务 ShoppingCartService, 这 是 一 个 保存 当前 购物 车 
中 商品 列表 的 单 例 服 务 。 当 有 数据 变动 时 ， 这 个 服务 就 会 通知 所 有 相关 的 对 象 。 


这 个 主意 看 起 来 够 简单 了 ， 但 在 实践 中 还 有 很 多 需要 解决 的 问题 。 


Angular 中 推荐 的 方式 是 采用 一 种 叫 作 单 向 数据 绑 定 的 方案 (在 其 他 一 些 现代 Web 开 发 框架 中 
也 是 一 样 ， 例 如 React )。 也 就 是 说 ， 你 的 数据 只 会 向 下 流 和 组件。 如 果 你 需要 改变 数据 ， 就 要 在 
顶层 触发 事件 ， 然 后 向 下 流 至 底层 组 件 。 


乍 看 起 来 , 单 向 数据 绑 定 可 能 反而 额外 增加 了 一 些 开销 , 但 实际 上 它 会 大 幅 减 轻 变更 检测 相 
关 的 复杂 度 ， 还 会 使 你 的 系统 行为 更 具 可 预测 性 。 


幸运 的 是 ， 数 据 架 构 管理 方面 只 有 两 个 主要 流派 : 
(1) 使 用 基于 观察 者 模式 的 架构 ， 如 RxJS ; 
(2) 使 用 基于 Flux 的 架构 。 


我 们 稍 后 会 讨论 如 何 为 应 用 实现 一 个 可 扩展 的 数据 架构 , 但 就 目前 来 说 , 基于 组 件 的 应 用 已 
经 完成 了 ， 先 好 好 享受 成 功 的 喜悦 吧 ! 












































































































































4.4 简介 


Angular 提 供 了 若干 内 置 指令 。 在 本 章 中 ， 我 们 将 探讨 每 一 个 内 置 指令 并 通过 示例 教会 你 如 
何 使 用 它们 。 








内 置 指 令 是 已 经 导入 过 的 ， 你 的 组 件 可 以 直接 使 用 它们 。 因 此 ， 不 用 像 你 自己 
的 组 件 一 样 把 它们 作为 指令 导入 进来 。 


4.2 ngIf 


如 果 你 希望 根据 一 个 条 件 来 决定 显示 或 隐藏 一 个 元 素 , 可 以 使 用 ng1f 指 令 。 这 个 条 件 是 由 你 
传 给 指令 的 表达 式 的 结果 决定 的 。 


如 果 表 达 式 的 结果 返回 的 是 一 个 假 值 ， 那 么 元 素 会 从 DOM 上 被 移 除 。 


















































下 面 是 一 些 例子 : 

«div «ngIf-z"false"»«/div» <!-- never displayed --» 

«div x*nglf="a > b"»«/div» <!-- displayed if a is more than b --> 

«div *ngIf="str == 'yes'"»«/div» <!-- displayed if str holds the string "yes" --> 
«div *ngI f="myFunc()"></div> <!-- displayed if myFunc returns a true value --» 


o 如 果 你 有 AngularJS 的 经 验 ， 那 么 大 概 以 前 已 经 用 过 ngIf 指 令 了 。 你 可 以 把 它 当 

作 AngularJS 中 ng-if 的 替代 品 。 但 另 一 方面 ，Angular 并 没有 为 AngularJS 中 的 
ng-show 指 令 提 供 内 置 的 蔡 代 品 。 那 么 ,如果 你 只 是 想 改变 一 个 元 素 的 CSS 可 见 
性 ， 就 应 该 使 用 ngStyle 或 class 指 令 。 本 章 稍 后 会 介绍 它们 。 
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4.3 ngSwitch 


有 时 候 你 需要 根据 一 个 给 定 的 条 件 来 浑 染 不 同 的 元 素 。 
遇 到 这 种 情况 时 ， 你 可 能 会 像 下 面 这 样 多 次 使 用 ngIf: 


«div class="container"> 


TTE 





«div *xngIf="myVar == 'A'">Var is A</div> 

«div *xngIf="myVar == 'B'">Var is B«/div» 

«div *xngIf="myVar !- 'A' && myVar != 'B'">Var is something else«/div» 
«/div» 


如 你 所 见 ， 当 myvar 的 值 既 不 是 A 也 不 是 B 时 ， 代 码 将 变 得 相当 繁 珊 ， 其 实 我 们 真正 想 表 达 的 
只 是 一 个 else 而 已 。 随 着 我 们 添加 的 值 越 来 越 多 ，ngIf 条 件 也 会 变 得 越 来 越 复 杂 。 


为 了 说 明 这 种 增长 的 复杂 性 ， 假 设 我 们 想 要 处 理 一 个 新 的 值 C。 








为 了 达到 目的 ， 我 们 不 仅 要 添加 一 个 使 用 ngIf 的 新 元 素 ， 而 ] 





«div class="container"> 





HEME BUR — A OL : 


«div *xngIf="myVar == 'A'">Var is A</div> 

«div *xngIf="myVar == 'B'">Var is B</div> 

«div *xngIf="myVar == 'C'">Var is C</div> 

«div *xngIf="myVar !- 'A' && myVar !- 'B' && myVar != 'C'">Var is something else«/div» 
</div> 


对 于 这 种 情况 ，Angular 引 入 了 ngSwitch 指 令 。 


如 果 你 熟悉 switch 语 名 的 话 ， 应 该 会 觉得 似曾相识 。 





指令 背后 的 思想 也 是 一 样 的 : 对 表达 式 进行 一 次 求 值 , 然后 根据 其 结 





AIRETIK 
一 旦 有 了 结果 ， 我 们 就 可 以 : 


口 使 用 ngswitchCase 指 令 描述 已 知 结果 ; 
口 使 用 ngSwitchDefault 指 令 处 理 所 有 其 他 未 知情 况 。 


让 我 们 使 用 这 组 新 的 指令 来 重 写 之 前 的 例子 : 


<div class="container" [ngSwitch]="myVar"> 

«div *xngSwitchCase="'A'">Var is A</div> 

«div *xngSwitchCase="'B'">Var is B«/div» 

«div xngSwitchDefault»Var is something else</div> 
«/div» 


如 果 想 要 处 理 新 值 Cc， 只 需要 插入 一 行 : 


<div class="container" [ngSwitch]="myVar"> 
«div *xngSwitchCase="'A'">Var is A</div> 
«div *xngSwitchCase="'B'">Var is B«/div» 
«div xngSwitchCase-"'C'"»Var is C«/div» 

















果 来 决定 如 何 显示 指令 
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«div xngSwitchDefault»Var is something else</div> 
«/div» 


不 需要 修改 默认 〈 即 备用 ) 条 件 。 


ngSwitchDefault 元 素 是 可 选 的 。 如 果 我 们 不 用 它 ， 那 么 当 myvar 没 有 匹配 到 任何 期 望 的 值 
时 就 不 会 泻 染 任何 东西 。 


你 也 可 以 为 不 同 的 元 素 声 明 同 样 的 kngSwitchCcase 值 ， 这 样 就 可 以 多 次 匹配 同一 个 值 了 。 例 
CUP: 


code/built in directives/app/ts/ng switch/ng switch.ts 





























template: 
«h4 class="ui horizontal divider header"» 
Current choice is {{ choice }} 
«/h4» 


«div class="ui raised segment"> 
«ul [ngSwitch]="choice"> 
«li «ngSwitchCase-"1"»First choice«/li» 
«li *xngSwitchCase="2">Second choice«/li» 
«li x«ngSwitchCase-"3"»Third choice«/li» 
«li *xngSwitchCase="4">Fourth choice«/li» 
«li *xngSwitchCase="2">Second choice, again«/li» 
«li xngSwitchDefault»Default choice«/li» 
«/ul» 
«/div» 


«div style-"margin-top: 20px;'» 
«button class="ui primary button" (click)="nextChoice()"> 
Next choice 
«/button» 
«/div» 





在 上 面 的 例子 中 ， 当 choice 的 值 是 2 的 时 候 ， 第 2 个 和 第 5 个 1i 都 会 被 泻 染 。 





4.4 ngStyle 





使 用 ngStyle 指 令 ， 可 以 通过 Angular 表 达 式 给 特定 的 DOM 元 素 设 定 CSS 属 性 。 


该 指令 最 简单 的 用 法 就 是 [style. <cssproperty>]="value" 的 形式 ， 下 面 是 一 个 例子 。 























code/built_in_directives/app/ts/ng_style/ng_style.ts 


«div [style.background-color]-"'yellow'"» 
Uses fixed yellow background 
«/div» 


这 个 代码 片段 就 是 使 用 ngstyle 指 令 把 CSS 的 background-color 属 性 设置 为 字符 串 字 面 量 
yellow. 
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男 一 种 设置 固定 值 的 方式 就 是 使 用 ngstyle 属 性 ， 使 用 键 值 对 来 设置 每 个 属性 。 


code/built_in_directives/app/ts/ng_style/ng_style.ts 


«div [ngStyle]="{color: 'white', 'background-color': 'blue'}"> 
Uses fixed white text on blue background 
«/div» 


Q, 注意 ， 在 ngStyle 的 说 明 中 ， 我 们 对 background-color 使 用 了 单 引 号 ， 但 却 没 

有 对 color 使 用 。 这 是 为 什么 呢 ? 因为 ngStyle 的 参数 是 一 个 JavaScript 对 象 ， 而 
color 是 一 个 合法 的 键 ， 不 需要 引号 。 但 是 在 background-color 中， 连 字符 是 
不 允许 出 现在 对 象 的 键 名 当中 的 ， 除 非 它 是 一 个 字符 串 ， 因 此 使 用 了 引号 。 
通常 情况 下 ， 我 尽量 不 会 对 对 象 的 键 使 用 引号 ， 除 非 不 得 不 用 。 

我 们 在 这 里 同时 设置 了 color 和 background-color 属 性 。 

但 ngStyle 指 令 真 正 的 能 力 在 于 使 用 动态 值 。 

在 这 个 例子 中 ， 我 们 定义 了 两 个 输入 村 


code/built_in_directives/app/ts/ng_style/ng_style.ts 











Tl 





o 


«div class="ui input"» 
<input type="text" name-"color" value="{{color}}" scolorinput» 
</div> 


«div class="ui input"» 
<input type="text" name-"fontSize" value="{{fontSize}}" #fontinput> 
</div> 


<button class="ui primary button" (click)="apply(colorinput.value, fontinput\ 
.value)"» 


Apply settings 
«/button» 


然后 使 用 它们 的 值 来 设置 三 个 元 素 的 CSS 属 性 。 
在 第 一 个 元 素 中 ， 我 们 基于 输入 框 的 值 来 设 定 字体 大 小 。 


code/built_in_directives/app/ts/ng_style/ng_style.ts 

















<div> 
«span [ngStyle]="{color: 'red'}" [style. font-size.px]="fontSize"> 
red text 
</span> 
</div> 


注意 ， 我 们 在 某 些 情况 下 必须 指定 单位 。 例 如 ， 把 font-size 设 置 为 12 不 是 合法 的 CSS， 必 
须 指 定 一 个 单位 ， 比 如 12px 或 者 1.2em。Angular 提 供 了 一 个 便捷 语法 用 来 指定 单位 : 这 里 我 们 使 
用 的 格式 是 [style. fontSize.px]。 
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Jn. px Fe HH KM HB font-size ERR KHEM., PRIEST WEE SHR [style. 
font-size.em], ， 以 相对 长 度 为 单位 来 表示 字体 大 小 ; 还 可 以 使 用 [style. fontSize.%], LAE at 
比 为 单位 。 











另外 两 个 元 素 使 用 tcolorinput 的 值 来 设置 文字 颜色 和 背景 颜色 。 





code/built_in_directives/app/ts/ng_style/ng_style.ts 


«h4 class="ui horizontal divider header"» 


ngStyle with object property from variable 
«/h4» 


«div» 
«span [ngStyle]="{color: color}"> 
{{ color }} text 
</span> 
</div> 


«h4 class="ui horizontal divider header"» 
style from variable 
«/h4» 


«div [style.background-color]-"color" 
style="color: white;"» 
{{ color }} background 
«/div» 


这 样 ， 当 我 们 点 击 Apply settings 按 钮 时 ， 就 会 调用 方法 来 设置 新 的 值 。 








code/built_in_directives/app/ts/ng_style/ng_style.ts 


apply(color: string, fontSize: number) { 
this.color = color; 
this. fontSize = fontSize; 


j 
与 此 同时 ， 文 本 颜色 和 字体 大 小 都 通过 NgStyle 指 令 作 用 在 元 素 上 了 。 





4.5 ngClass 


ngClass 指 令 在 HTML 模板 中 用 ngclass 属 性 来 表示 ， 让 你 能 动态 设置 和 改变 一 个 给 定 DOM 
元 素 的 CSS 类 。 


如 果 你 用 过 AngularJS ， 会 发 现 ngClass 指 令 和 过 去 在 AngularJS 中 的 ngClass 所 
做 的 事 是 非常 相似 的 。 








使 用 这 个 指令 的 第 一 种 方式 是 传人 一 个 对 象 字 面 量 。 该 对 象 希望 以 类 名 作为 键 , 而 值 应 该 
一 个 用 来 表明 是 否 应 该 应 用 该 类 的 真 / 假 值 。 





是 
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假设 我 们 有 一 个 叫 作 bordered 的 CSS 类 ， 用 来 给 元 素 添加 一 个 黑色 虚线 边框 。 





code/built_in_directives/app/css/styles.scss 


.bordered { 
border: 1px dashed black; 
background-color: #eee; 


} 
我 们 来 添加 两 个 div 元 素 : 一 个 一 直 都 有 bordered 类 ( 因此 一 直 有 边框 )， 而 另 一 个 永远 都 








code/built_in_directives/app/ts/ng_class/ng_class.ts 


<div [ngClass]="{bordered: false}">This is never bordered</div> 
<div [ngClass]="{bordered: true}">This is always bordered</div> 


如 预期 一 样 ， 两 个 div 应 该 是 如 图 4-1 这 样 泻 染 的 。 








This is never bordered 


iin 
s 
= 
yr 





图 4-1 ngClass 指 令 的 简 
当然 ， 使 用 ngClass 指 令 来 动态 分 配 类 会 有 用 得 多 。 
为 了 动态 使 用 它 ， 我 们 添加 了 一 个 变量 作为 对 象 的 值 : 


code/built_in_directives/app/ts/ng_class/ng_class.ts 





<div [ngClass]="{bordered: isBordered]"» 
Using object literal. Border {{ isBordered ? "ON" : "OFF" }} 
</div> 


或 者 在 组 件 中 定义 该 对 象 : 


code/built_in_directives/app/ts/ng_class/ng_class.ts 





export class NgClassSampleApp { 
isBordered: boolean; 
classesObj: Object; 
classList: string[]; 


并 直接 使 用 它 : 


code/built_in_directives/app/ts/ng_class/ng_class.ts 











<div [ngClass]="classesObj"> 
Using object var. Border {{ classesObj.bordered ? "ON" : "OFF" }} 
</div> 
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A 再 次 强调 ， 当 你 使 用 像 bordered-box 这 种 包含 连 字 符 的 类 名 时 需要 小 心 。 
JavaScript 对 象 不 允许 字面 量 的 键 出 现 连 字符 。 如 果 确 实 需要 ， 那 就 必须 像 这 样 
用 字符 串 作 为 键 : 


«div [ngClass]="{'bordered-box': false}">...</div> 


我 们 也 可 以 使 用 一 个 类 名 列表 来 指定 哪些 类 名 会 被 添加 到 元 素 上 。 为 此 , 我 们 可 以 传人 一 个 
数组 型 字面 量 : 


code/built_in_directives/app/ts/ng_class/ng_class.ts 


«div class="base" [ngClass]-"['blue', 'round']"» 
This will always have a blue background and 
round corners 


«/div» 
或 者 在 组 件 中 声明 一 个 数组 对 象 : 
this.classList = ['blue', 'round']; 
并 把 它 传 进来 : 


code/built_in_directives/app/ts/ng_class/ng_class.ts 


«div class="base" [ngClass]="classList"> 


This is (( classList.indexOf('blue') > -1 ? "" : "NOT" }} blue 
and {{ classList.indexOf('round') > -1 ? "" : "NOT" }} round 
</div> 





在 上 个 例子 中 ，[ngClass] 分 配 的 类 名 和 通过 HTML 的 class 属 性 分 配 的 已 存在 类 名 都 是 生 
ASCH o 


最 后 添加 到 元 素 的 类 总 会 是 HTML 属 性 class 中 的 类 和 [ngclass] 指令 求 值 结果 得 到 的 类 的 




















在 这 个 例子 中 : 


code/built_in_directives/app/ts/ng_class/ng_class.ts 


«div class="base" [ngClass]-"['blue', 'round']"» 
This will always have a blue background and 
round corners 

«/div» 


元 素 有 全 部 的 三 个 类 : HTML 的 class 属 性 提供 的 base ， 以 及 通过 [ngClass] 分 配 的 blue 和 
round ( 如 图 4-2 所 示 )。 
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ROD Elements Console Sources Network Timeline Profiles Resources 





button>Toggle</button: 
b <div class="selectors">..</div: 

<div class="base blue round"> 
This will always have a blue background and 
round corners 

</div: 

div class="base blue round" 

This is blue 


and round 
/ div: 
/style-sample-app: 
<!— Our app loads here 一 > 
/div> 
<!— Code injected by 1 live- Server 一 > 


html body div. ui.main.text “container style- - amples app SLA | 














4.6 ngFor 

















Audits 


图 4-2 ”来 自 属性 和 指令 的 CSS 类 


这 个 指令 的 任务 是 重复 一 个 给 定 的 DOM 元 素 (或 一 组 DOM 元 素 ), 每 次 重复 都 会 从 数组 中 取 


一 个 不 同 的 值 。 


e 这 个 指令 是 AngularJS 中 ng-repeat 的 继任 者 。 

















它 的 语法 是 xngFor="let item of items", 














O items 是 来 自 组 件 控 制 器 的 一 组 项 的 集合 。 


D let item 语 法 指定 一 个 用 来 接收 items 数 组 中 每 个 元 素 的 (模板 ) 变量 。 





要 阐明 这 一 点 ， 我 们 来 看 一 下 代码 示例 。 我 们 在 组 件 控 制 咒 中 声明 了 一 个 城市 的 数组 : 





this.cities = ['Miami', 'Sao Paulo', 'New York']; 


SRA TERA AA UNF SHTML Fr BE. 


TON 





code/built in directives/app/ts/ng for/ng for.ts 
«h4 class="ui horizontal divider header"» 
Simple list of strings 
«/h4» 


«div class="ui list" x*xngFor="let c of cities"> 
«div class="item">{{ c }}</div> 
«/div» 





它 会 如 你 期 望 的 那样 在 div 中 尝 染 每 一 个 城市 ， 如 图 4-3 所 示 。 


Simple list of strings 
Miami 
Sao Paulo 


New York 





图 4-3 ”使 用 ngFor 指 令 的 结果 
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我 们 还 可 以 这 样 迭 代 一 个 对 象 数 组 。 


code/built in directives/app/ts/ng for/ng for.ts 


this.people - [ 
{ name: 'Anderson', age: 35, city: 'Sao Paulo' 
{ name: 'John', age: 12, city: 'Miami' }, 
{ name: 'Peter', age: 22, city: 'New York' ] 


]5 
JR AD BET tH MT ER S 


code/built in directives/app/ts/ng for/ng for.ts 


«h4 class="ui horizontal divider header"» 
List of objects 
«/h4» 


«table class="ui celled table"» 
«thead» 
«tr» 
«th»Name«/th» 
«th»Age«/th» 
«th»City«/th» 
</tr> 
</thead> 
«tr xngFor="let p of people"» 
<td>{{ p.name }}</td> 
<td>{{ p.age }}</td> 
<td>{{ p.city }}</td> 
</tr> 
</table> 


结果 如 图 4-4 所 示 。 


List of objects 


Name Age City 


Anderson 35 Sao Paulo 


John 12 Miami 


Peter 22 New York 


图 4-4 泻 染 对 象 数组 








我 们 还 可 以 使 用 葡 套 数组 。 如 果 想 根据 城市 进行 分 组 ， 


code/built in directives/app/ts/ng for/ng for.ts 


this.peopleByCity = [ 
{ 


n] 以 定义 一 个 新 对 象 数组 o 
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city: 'Miami', 
people: [ 
{ name: 'John', age: 12 } 
{ name: 'Angel', age: 22 } 
] 


) 
{ 
city: 'Sao Paulo', 
people: [ 
{ name: 'Anderson', age: 35 }, 
{ name: 'Felipe', age: 36 } 
] 
} 


]57 
E 


然后 可 以 使 用 ngFor 为 每 个 城市 泻 染 一 个 h2 标 签 。 


code/built_in_directives/app/ts/ng_for/ng_for.ts 





«div *xngFor="let item of peopleByCity"» 
«h2 class="ui header">{{ item.city }}</h2> 


Fe EAE — “Maik Bt © PEAT AK. 


code/built_in_directives/app/ts/ng_for/ng_for.ts 








<table class="ui celled table"> 
<thead> 
<tr> 
«th»Name«/th» 
«th»Age«/th» 
</tr> 

«/thead» 

«tr «ngFor-"let p of item.people"» 
<td>{{ p.name }}</td> 
<td>{{ p.age }}</td> 

</tr> 

</table> 


下 面 是 模板 代码 的 最 终结 果 。 








code/built_in_directives/app/ts/ng_for/ng_for.ts 





<h4 class="ui horizontal divider header"» 
Nested data 
«/h4» 


«div xngFor="let item of peopleByCity"» 
«h2 class="ui header">{{ item.city }}</h2> 


«table class="ui celled table"» 
<thead> 
<tr> 
«th»Name«/th» 
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«th»Age«/th» 
</tr> 
</thead> 


«tr xngFor="let p of item.people"> 
<td>{{ p.name }}</td> 


<td>{{ p.age }}</td> 
</tr> 


</table> 
</div> 


它 会 为 每 个 城市 泻 染 一 个 表格 ， 如 图 4-5 所 示 。 

Nested data 

Miami 
Name Age 
John 
Angel 

Sao Paulo 

Name 

Anderson 


Felipe 





获取 索引 


在 迭代 数组 时 ， 我们 可 能 也 要 获取 每 一 项 的 索引 。 


我 们 可 以 在 ngFor 指 令 的 值 中 插入 语法 let idx 


= index 并 用 分 号 分 隔 开 ， 这 样 就 可 以 获取 
索引 了 。 这 时 候 ，Angular 会 把 当前 的 索引 分 配给 我 们 提供 的 变量 ( 在 这 里 


Fl 7s 











是 变量 idx )。 


BE 


A 注意 ， 和 JavaScript 一 样 ， 索 引 都 是 从 0 开始 的 。 因 此 第 一 个 元 素 的 索引 是 0， 第 


二 个 是 1， 以 此 类 推 。 


对 我 们 的 第 一 个 例子 稍 加 改动 ， 添 加 代码 段 let num = index. 
code/built in directives/app/ts/ng for/ng for.ts 
«div class="ui list" xngFor="let c of cities; let num = index"> 
«div class="item">{{ num«1 }} - (( c }}</div> 
«/div» 
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它 会 在 城市 的 名 称 前 面 添加 序号 ， 如 网 4-6 所 示 。 


List with index 
1- Miami 
2 - Sao Paulo 


3 - New York 

















图 4-6 ”使 用 索引 





4.7 ngNonBindable 





当 我 们 想 告 诉 Angular 不 要 编译 或 者 绑 定 页 面 中 的 某 个 特殊 部 分 时 ， 要 使 用 ngNodBindable 


指令 。 























假设 我 们 想 在 模板 中 演 染 纯 文本 {{ content }} 。 通 常情 况 下 ， 这 段 文本 会 被 绑 定 到 变量 
content 的 值 ， 因 为 我 们 使 用 了 {{ }} 模 板 语法 。 


那 该 如 何 泻 染 出 纯 文 本 {{ content )) JE? 可 以 使 用 ngNonBindable 指 令 。 


假设 我 们 想 要 用 一 个 div 来 泻 染 变量 content 的 内 容 ， 紧 接着 输出 文本 <- this is what 
{{ content }} rendered 来 指向 变量 实际 的 值 。 


为 了 做 到 这 一 点 ， 要 使 用 下 面 的 模板 。 


code/built_in_directives/app/ts/ng_non_bindable/ng_non_bindable.ts 

template: ^ 
«div class='ngNonBindableDemo' > 

<span class="bordered">{{ content }}</span> 

<span class="pre" ngNonBindable> 

&larr; This is what {{ content }} rendered 

</span> 

</div> 















































有 了 ngNonBindable 属 性 , Angular 不 会 编译 第 二 个 span 里 的 内 容 , 而 是 原封 不 动 地 将 其 显示 
出 来 ( 如 图 4-7 所 示 )。 























图 4-7 使 用 ngNonBindable 的 结果 


48 总 结 


Angular 的 核心 指令 数量 很 少 , 但 我 们 却 能 通过 组 合 这 些 简单 的 指令 来 创建 五 花 八 门 的 应 用 。 


Angular 中 的 表单 











5.1 表单 一 一 既 重 要 ， 又 复杂 


在 Web 应 用 中 ， 表 单 或 许 是 最 重要 的 部 分 。 虽然 我 们 常 从 点 击 链 接 或 移动 鼠标 中 得 到 事件 通 
知 ， 但 大 多 数 “ 富 数据 ”都 是 通过 表单 从 用 户 那里 获得 的 。 

从 表面 上 看 ， 表 单 似乎 很 简单 : 创建 一 个 input 标 签 ， 用 户 填 人 数据 ， 然 后 再 点 击 提交 。 这 
有 什么 难 的 ? 


但 事实 证 明 ， 表 单 最 终 可 能 是 非常 复杂 的 。 原 因 如 下 : 


口 表单 输入 意味 着 需要 在 页 面 和 服务 器 端 同时 修改 这 份 数据 ; 
口 修改 的 内 容 通常 要 在 页 面 的 其 他 地 方 反映 出 来 ; 

口 用 户 的 输入 可 能 存在 很 多 问题 ， 所 以 需要 验证 输入 的 内 容 ; 
口 用 户 界面 需要 清晰 地 显示 出 可 能 出 现 的 预期 结果 和 错误 信息 ; 
a 字段 之 间 的 依赖 可 能 存在 复杂 的 业务 逻辑 ; 

口 我 们 希望 不 依赖 DOM 选 择 器 就 能 轻松 测试 表单 。 


值得 庆幸 的 是 ，Angular 已 经 给 出 了 上 述 所 有 问题 的 解决 方案 。 


O 表单 控件 (FormControl ) 封装 了 表单 中 的 输入 ， 并 提供 了 一 些 可 供 操纵 的 对 象 。 
口 验证 器 (validator ) 让 我 们 能 以 自己 喜欢 的 任何 方式 验证 表单 输入 。 
O 观察 者 (observer) 让 我 们 能 够 监听 表单 的 变化 ， 并 作出 相应 的 回应 。 


在 本 章 中 , 我 们 将 一 步 一 步 构 建 表单 应 用 。 先 构建 一 些 简单 的 表单 ， 然 后 构建 逻辑 更 复杂 的 
表单 。 




























































































5.2 FormControl 和 FormGroup 


FormControl 和 FormGroup 是 Angular 中 两 个 最 基础 的 表单 对 象 。 


1 
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5.2.1 FormControl 


> 


i 


O Ay 


FormControl 代 表单 一 的 输入 字段 ， 它 是 Angular 表 单 中 的 最 小 单元 。 
FormControl 封 装 了 这 些 字段 的 值 和 状态 ， 比如 是 否 有 效 、 是 否 脏 (被 修改 过 ) 或 是 否 有 错 


























等 


比如 ， 下 列 代码 演示 了 如 何在 TypeScript 中 使 用 FormControl : 


// create a new FormControl with the value "Nate" 
let nameControl = new FormControl("Nate"); 


let name = nameControl.value; // -» Nate 


// now we can query this control for certain values: 
nameControl.errors // -» StringMap<string, any» of errors 
nameControl.dirty // -> false 

nameControl.valid // -» true 

// etc. 


为 了 构建 表单 ， 我 们 会 创建 几 组 FormControl 对 象 ， 然 后 为 它们 附加 元 数据 和 逻辑 。 
在 Angular 中 ,我 们 经 常 将 一 个 类 ( 本 例 中 为 FormControl ) 以 属性 形式 ( 本 例 中 为 formControl ) 








附加 在 DOM 上。 比如 下 面 这 个 表单 : 


<!-- part of some bigger form --> 
<input type="text" [formControl]="name" /» 


这 会 在 此 form 的 上 下 文中 创建 一 个 新 的 FormCcontrol 对 象 。 稍 后 我 们 会 进一步 讨论 它 的 工作 





原理 。 


5.2.2 FormGroup 


大 多 数 表 单 都 拥有 不 止 一 个 字段 ， 因此 我 们 需要 某 种 方式 来 管理 多 个 FormControl。 假设 我 





们 要 检查 表单 的 有 效 性 。 如 果 要 遍历 这 个 FormControl 数 组 并 检查 每 一 个 FormControl 是 否 有 效 ， 
必然 相当 繁琐 ; 而 Formcroup 则 可 以 为 一 组 FormControl 提 供 总 包 接 口 ( wrapper interface ), 来 解 
决 这 种 问题 。 














下 面 是 FormGroup 的 创建 方式 : 


let personInfo = new FormGroup({ 
firstName: new FormControl("Nate"), 
lastName: new FormControl("Murray"), 
zip: new FormControl("90210") 

}) 


FormGroup 和 FormControl 都 继承 自 同一 个 祖先 AbstractControl"。 这 意味 检查 personInfo 





(D https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/model.ts 
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的 状态 或 值 就 像 检 查 单个 FormControl 那 么 容易 : 


personInfo.value; // -> { 
// firstName: "Nate", 
// lastName: "Murray", 
// zip: "90210" 

// } 


// now we can query this control group for certain values, which have sensible 
// values depending on the children FormControl's values: 

personInfo.errors // -» StringMap«string, any» of errors 

personInfo.dirty // -> false 

personInfo.valid // -» true 

// etc. 


注意 ， 当 我 们 试图 从 FormGroup 中 获取 value 时 ， 会 收 到 一 个 “ 键 值 对 ”结构 的 对 和 象 。 它 能 
让 我 们 从 表单 中 一 次 性 获取 全 部 的 值 而 无 需 逐 一 遍历 FormControl ， 使 用 起 来 相当 顺手 。 








5.3 ”我 们 的 第 一 个 表单 


创建 表单 的 方式 很 多 ， 而 且 好 几 种 重要 的 方式 我 们 还 没有 讨论 到 。 先 来 看 一 个 完整 的 例子 ， 
稍 后 再 一 一 解释 。 








o 本 节 的 所 有 示例 代码 都 可 以 在 forms/ 目 录 下 找到 。 





我 们 要 构建 的 第 一 个 表单 ， 效 果 如 图 $-1 所 示 。 





Demo Form: Sku 


SKU 


Submit 





图 $-1 ” 带 SKU 的 表单 演示 : 简易 版 


假设 我 们 要 构建 一 个 电子 商务 网 站 来 展示 并 销售 一 些 产 品 。 在 此 应 用 中 需要 存储 产品 的 
SKU， 因 此 先 来 创建 一 个 只 有 SKU 输 入 框 的 简易 表单 。 








i 
L 








SKU 是 库存 单位 (stockkeeping unit) 的 缩写 。 它 是 用 来 跟踪 产品 库存 的 唯一 编 
号 。 当 我 们 提 到 SKU 时 ， 指 的 是 人 类 可 读 的 产品 编码 。 


这 个 表单 超级 简单 : 只 有 一 个 sku ( 带 label ) 输入 框 和 一 个 提交 按钮 。 
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我 们 先 把 表单 变 为 组 件 。 你 应 该 还 记得 ， 定 义 组 件 需要 包含 以 下 三 个 部 分 : 
D 配置 ecomponent() 注 解 ; 

口 创建 模板 ; 

O 在 组 件 定义 类 中 实现 自 定 义 功 能 。 

下 面 来 依次 实现 它们 。 











5.3.1 加 载 FormsModule 


为 了 使 用 这 个 新 的 表单 库 ， 先 要 确保 我 们 的 NgModule 中 导入 了 这 个 表单 库 。 


Angular 中 有 两 种 使 用 表单 的 方式 , 我 们 在 本 章 中 都 会 展开 讨论 : 使 用 FormsModule 以 及 使 用 
ReactiveFormsModule。 既 然 都 要 用 到 ,那么 这 个 模块 就 同时 导入 它们 。 因 此 需要 在 引用 启动 程 
序 app.ts 中 这 样 写 : 


import { 
FormsModule, 
ReactiveFormsModule 

} from '@angular/forms'; 











// farther down... 


@NgModule( { 
declarations: [ 
FormsDemoApp, 
DemoFormSku, 
// ... our declarations here 
], 
imports: [ 
BrowserModule, 
FormsModule, // «—- add this 
ReactiveFormsModule // «-- and this 
], 
bootstrap: [ FormsDemoApp 
}) 


class FormsDemoAppModule {} 


这 确保 了 我 们 能 在 视图 中 使 用 Angular 表 单 指令 。 先 简要 介绍 一 下 , FormsModule 为 我 们 提供 
了 一 些 模板 驱动 的 指令 ， 例 如 : 


QO) ngModel 
L] NgForm 











ReactiveFormsModul e 则 提供 了 下 列 指令 


口 formControl 





DO ngFormGroup 
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此 外 , 还 有 很 多 指令 。 我 们 还 没有 讨论 过 如 何 使 用 这 些 指令 以 及 它们 是 做 什么 的 ,但 很 快 就 
要 讲 到 了 。 现 在 只 需要 知道 把 FormsModule 和 ReactiveFormsModule 导 和 到 我 们 的 NgModule 中 就 
行 了 。 这 表示 我 们 能 在 视图 中 使 用 上 述 所 有 指令 ， 并 能 在 组 件 中 注入 相应 的 服务 。 














5.3.2 简易 SKU 表单 GComponent 注解 
现在 我 们 就 可 以 开始 创建 组 件 了 。 


code/forms/app/forms/demo_form_sku.ts 


import { Component } from '@angular/core'; 


@Component ( f 
selector: 'demo-form-sku', 














这 里 定义 了 一 个 demo-form-sku 的 选择 需 (selector ) 还 记得 吧 ? selector 会 告诉 Angular， 
组 件 将 绑 定 到 哪些 元 素 上 。 这 里 我 们 可 以 通过 demo-form-sku 标 签 来 使 用 这 个 组 件 ; 





«demo- form-sku» «/demo- form-sku» 


5.8.8. 简易 SKU 表单 template 
我 们 来 看 看 template。 


code/forms/app/ts/forms/demo_form_sku.ts 





template: ~ 
<div class="ui raised segment"> 
<h2 class="ui header">Demo Form: Sku</h2> 
<form #f="ngForm" 
(ngSubmit )="onSubmit(f.value)" 
class-"ui form"» 


«div class="field"> 
«label for="skuInput">SKU</label> 
«input type="text" 
id="skuInput" 
placeholder="SKU" 
name="sku" ngModel» 
</div> 


«button type="submit" class-"ui button">Submit</button> 
</form> 
</div> 


1. form 和 NgForm 
现在 事情 开始 变 得 有 趣 了 : 我 们 导入 了 FormsModule ， 因 此 可 以 在 视图 中 使 用 NgForm 了 。 记 
住 ， 当 这 些 指令 在 视图 中 可 用 时 ， 它 就 会 被 附加 到 任何 能 匹配 其 selector 的 节点 上 。 
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NgFormi T —TEBERIEERHER TAE: 它 的 选择 器 包含 form 标签 ( 而 不 用 显 式 添加 ngForm 属 
性 )。 这 意味 着 当 我 们 导入 FormsModule 时 候 ，NgForm 就 会 被 自动 附加 到 视图 中 所 有 的 <form> 标 
签 上 。 这 确实 非常 有 用 ， 但 由 于 它 发 生 在 幕后 ， 也 许 会 让 很 多 人 感到 困惑 。 


NgForm 给 我 们 提供 了 两 个 重要 的 功能 : 
(1) 一 个 名 叫 ngForm 的 FormGroup 对 象 ; 
(2) 一 个 输出 事件 (ngSubmit)。 


你 可 以 看 到 我 们 在 视图 的 <form> 标 签 中 同时 用 到 了 它们 两 个 。 
































code/forms/app/ts/forms/demo form sku.ts 
<form #f="ngForm" 
(ngSubmit )="onSubmit(f.value)" 
首先 ,我 们 使 用 了 #f=" ngForm", #v=thi ng 语法 的 意思 是 ， 我 们 希望 在 当前 视图 中 创建 一 个 
局 部 变量 。 
这 里 我 们 为 视图 中 的 ngForm 创 建 了 一 个 别名 ， 并 绑 定 到 变量 *f。 这 个 ngForm 来 自 哪 里 呢 ? 
它 是 由 NgForm 指 令 导 出 的 。 


ngForm 是 什么 类 型 的 对 象 呢 ?” 它 是 FormGroup 类 型 的 。 这 意味 着 我 们 可 以 在 视图 中 把 变量 f 
当 作 FormGroup 使 用 ， 而 这 也 正 是 我 们 在 输出 事件 (ngSubmit ) 中 的 使 用 方法 。 

















A 细心 的 读者 可 能 会 注意 到 ， 上 面 提 到 NgForm 会 自动 附加 到 <formy 标签 上 ( 因为 
NgForm 指 令 的 选择 器 中 默认 包含 了 form )， 这 意味 着 我 们 不 必 添 加 ngForm 属 性 

就 能 使 用 NgForm 指 令 。 但 是 这 里 我 们 也 将 ngForm 添 加 到 了 属性 的 值 上 。 这 是 笔 
误 吗 ? 
不 ， 这 不 是 笔 误 。 如 果 ngForm 是 属性 的 键 ， 那 就 是 在 告诉 Angular: 我 们 要 根据 
这 个 属性 使 用 NgForm 指 令 。 但 在 这 里 ， 我 们 要 对 一 个 引用 赋值 ， 而 把 ngForm 用 
作 属 性 值 。 这 表示 把 ngForm 这 个 表达 式 的 执行 结果 赋值 给 局 部 模板 变量 f。 
既然 ngForm 在 这 个 节点 上 ， 你 应 该 可 以 推断 出 我 们 正在 导出 的 这 个 f 变 量 是 
FormGroup 类 型 的 ， 接 下 来 就 可 以 在 视图 中 的 任何 地 方 引 用 它 了 。 


我 们 在 表单 中 绑 定 ngSubmit 事 件 的 语法 是 : (ngSubmit )="onSubmit(f.value)"。 
O (ngSubmit): 来 自 NgForm 指 令 。 
O onSubmit(): 将 会 在 我 们 的 组 件 类 中 进行 定义 ( 稍 后 )。 
口 f.value: f 就 是 我 们 前 面 提 到 的 FormGroup， 而 .value 会 以 键 值 对 的 形式 返回 FormGroup 
中 所 有 控件 的 值 。 
总 结 起 来 ， 这 行 代码 的 意思 是 :“ 当 我 提交 表单 时 ， 将 会 以 该 表单 的 值 作为 参数 ， 调 用 组 件 
实例 上 的 onSubmit 方 法 。” 
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2. input 和 NgModel 
在 讨论 NgModel 之 前 ， 关 于 input 标 签 还 有 几 点 需要 说 明 。 


code/forms/app/ts/forms/demo_form_sku.ts 


<form #f="ngForm" 
(ngSubmit )="onSubmit(f.value)" 
class="ui form"» 


«div class="field"> 
«label for="skuInput">SKU</label> 
<input type="text" 
id="skuInput" 
placeholder="SKU" 
name="sku" ngModel» 





</div> 

O class="ui form" 和 class="field" 是 两 个 可 选 的 类 。 它 们 来 自 CSS 框 架 Semantic UI", © 
们 并 不 属于 Angular 的 范畴 ， 在 这 里 加 上 它们 只 是 为 了 让 本 例子 好 看 一 些 。 
口 1abel 标 签 的 for 属 性 和 input 标 签 的 id 属性 是 一 致 的 ， 这 依据 的 是 W3C 标 准 ?。 
a 我 们 设置 SKU 控 件 的 placeholder 属 性 ， 将 其 作为 input 值 为 空 时 给 用 户 的 提示 。 

NgModel 指 令 指 定 的 selector 是 ngModel 。 这 意味 着 我 们 可 以 通过 添加 这 个 属性 把 它 附 加 到 
input 标 签 上 : ngModel="whatever"。 在 这 里 我 们 指定 了 一 个 不 带 属性 值 的 ngModel 。 

有 两 种 不 同 的 方法 能 在 模板 中 指定 ngModel ， 这 里 是 第 一 种 。 当 使 用 不 带 属性 值 的 ngModel 
时 ， 我 们 是 要 指定 : 

(1) 单 向 数据 绑 定 ; 

(2) 希望 在 表单 中 创建 一 个 名 为 sku 的 FormControl ( 这 个 sku 来 自 input 标 签 上 的 name 属 性 )。 

NgModel 会 创建 一 个 新 的 FormControl 对 象 , 把 它 自动 添加 到 父 FormGroup 上 ( 这 里 也 就 是 form 
表单 对 象 )， 并 把 这 个 FormControl 对 象 绑 定 到 一 个 DOM 上。 也 就 是 说 ， 它 会 在 视图 中 的 input 标 
签 和 FormControl 对 象 之 间 建 立 关联 。 这 种 关联 是 通过 name 属 性 建立 的 ， 在 本 例 中 是 "sku'" 。 





















































ni 



































e NgModel gngModel 有 什么 不 同 呢 ? 通常 ， 我 们 使 用 Pascal 命 名 法 ( de NgModel ) 
时 ， 指 的 是 类 和 供 代 码 中 引用 的 对 象 。 首 字母 小 写 的 驼峰 命名 法 〈 如 ngModel ) 
来 自 指令 的 选择 器 selector， 并 且 只 会 被 用 在 DOM/ 模 板 中 。 
需要 指出 的 是 ，NgModel 和 FormControl 并 不 是 同一 个 。NgModel 是 用 在 视图 中 
的 指令 ， 而 FormControl 则 用 来 表示 表单 中 的 数据 和 验证 规则 。 





®© http://semantic-ui.com/ 
@ http://www.w3.org/TR/WCAG20-TECHS/H44.html 
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Q, Att, RAAB AngModel X 3: MAngularJS AE MAB, E SERT XUS, 
我 们 会 看 到 如 何 进行 实现 。 


5.3.4 简易 SKU 表单 : 组 件 定义 类 
现在 来 看 看 组 件 类 的 定义 。 


code/forms/app/ts/forms/demo form sku.ts 


export class DemoFormSku { 
onSubmit(form: any): void { 
console.log('you submitted value:', form); 
j 
j 


在 这 里 , 我 们 的 类 定义 了 一 个 名 为 onSubmit 的 方法 , 该 方法 会 在 表单 提交 时 调用 。 目 前 我 们 
只 用 console.1og 打 印 出 传 进去 的 值 。 








5.3.5 WWE 
全 部 代码 如 下 所 示 。 


code/forms/app/ts/forms/demo_form_sku.ts 





import { Component } from '@angular/core'; 


@Component ( { 
selector: 'demo-form-sku', 


template: ^ 
«div class="ui raised segment"» 
«h2 class="ui header"»Demo Form: Sku«/h2» 
«form sf-"ngForm" 
(ngSubmit)-"onSubmit(f.value)" 
class-"ui form"> 


«div class="field"> 
«label for="skuInput">»SKU</label> 
«input type="text" 
id-"skuInput" 
placeholder="SKU" 
name="sku" ngModel> 
</div> 


«button type="submit" class-"ui button"»Submit«/button» 
«/ form» 
«/div» 


}) 
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export class DemoFormSku { 
onSubmit(form: any): void { 
console.log('you submitted value:', form); 
j 
j 


如 果 打 开 浏 览 需 运 行 代码 ， 结 果 如 图 5-2 所 示 。 


@ © O / P anguar2 - Forms: Forms: x | ng-book | 











CŒ | D localhost:8080 = 





R O | Elements Console Sources Network Timeline >» 


Bez Angular 2 Forms Example © Y <topframe> v CPreserve log 


you submitted value: Object {sku: "ABC123"} demo form sku.ts:16 





Demo Form: Sku 





SKU 


ABC123 


Submit 








X 





图 $-2” 带 SKU 的 表单 演示 : 简易 版 ， 已 提交 





5.4 使 用 FormBuilder 





使 用 ngForm 和 ngControl 隐 式 构建 FormControl 和 FormGroup 确 实 很 方便 ,但 无 法 为 我 们 提供 
更 多 定制 化 选项 。 使 用 FormBuilgder 构 建 表 单 则 是 一 种 更 为 灵活 和 通用 的 方式 。 

FormBuilder 是 一 个 名 副 其 实 的 表单 构建 助手 。 你 应 该 还 记得 , 表单 是 由 FormControl 和 
FormGroup 构 成 的 ， 而 FormBuilder 则 可 以 帮助 我 们 创建 它们 (你 可 以 把 它 看 作 一 个 “工厂 ” 
对 象 )。 

让 我 们 在 先前 的 例子 中 添加 一 个 FormBuilder ， 看 看 : 


a 如 何在 组 件 定义 类 中 使 用 FormGroup; 
口 如 何在 视图 表单 中 使 用 自 定义 的 FormGroup。 
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5.5 响应 式 表 单 FormBuilder 


我 们 将 使 用 formcGroup 和 formCcontrol 指 令 来 构建 这 个 组 件 ， 这 意味 着 我 们 需要 导入 相应 的 
类 。 导 入 的 代码 如 下 所 示 。 














code/forms/app/ts/forms/demo_form_sku_with_builder.ts 


import { Component } from 'Gangular/core'; 
import { 

FormBuilder, 

FormGroup 
} from '@angular/forms'; 


@Component ( { 
selector: 'demo-form-sku-builder', 


5.5.1 使 用 FormBuilder 


通过 在 组 件 类 上 声明 带 参数 的 constructor ， 我 们 注入 了 一 个 FormBui lder。 


code/forms/app/ts/forms/demo_form_sku_with_builder.ts 


export class DemoFormSkuBuilder { 
myForm: FormGroup; 


constructor(fb: FormBuilder) { 
this.myForm = fb.group({ 
'sku': ['ABC123'] 
}); 
} 


onSubmit(value: string): void { 
console.log('you submitted value: ', value); 


} 
} 


A 注入 意味 着 什么 ? 我 们 还 未 曾 深 入 讨论 过 依赖 注入 ( dependency injection, DI ) 
以 及 DI 是 如 何 关联 到 继承 树 的 ， 因 此 你 可 能 看 不 太 懂 最 后 这 和 句 话 。 我 们 在 第 8 
章 中 讨论 了 很 多 关于 依赖 注入 的 知识 ， 如 果 你 希望 深入 学 习 ， 请 移 步 那里 。 
大 体 来 说 ， 依 赖 注 入 就 是 用 来 告诉 Angular， 为 了 让 组 件 正 常 运 行 需要 给 它 哪些 
依赖 。 














在 这 期 间 , Angular 将 会 注入 一 个 从 FormBuilder 类 创建 的 对 象 实例 ,并 把 它 赋值 给 fb 变量 ( 来 
自 构 造 函数 )。 


我 们 将 会 使 用 FormBuilder 中 的 两 个 主要 函数 : 
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口 control ， 用 于 创建 一 个 新 的 FormControl ; 
D group ， 用 于 创建 一 个 新 的 FormGroup 。 


注意 ， 我 们 在 类 中 创建 了 一 个 名 叫 myForm 的 实例 变量 。( 简单 起 见 ， 确 实 也 可 以 把 它 称 作 
form， 但 这 里 是 为 了 区 分 Formcroup 和 之 前 的 form 表 单 。) 


myForm 是 FormGroup 类 型 。 我 们 通过 调用 fb .group() 来 创建 FormGroup 。 .group 方 法 的 参数 
是 代表 组 内 各 个 FormControl 的 键 值 对 。 


在 这 里 ,我 们 设置 了 一 个 名 为 sku 的 控件 ， 其 值 为 ["ABC123"] 一 一 意思 是 控件 的 默认 值 为 
"ABC123"。( 你 可 能 注意 到 了 这 里 用 的 是 数组 。 这 是 因为 我 们 稍 后 还 会 添加 更 多 配置 项 。 ) 


现在 我 们 就 能 在 视图 中 使 用 myForm 了 。( 也 就 是 说 ， 我 们 需要 将 它 绑 定 到 表单 元 素 上 。 ) 




























































































5.5.2 ”在 视图 中 使 用 myForm 

我 们 和 希望 修改 cformy 标签 ， 让 它 使 用 myForm 变 量 。 回 忆 一 下 ， 在 上 一 节 中 我 们 提 到 过 ， 妆 
导 和 人 FormsModule 时 , ngForm 就 会 自动 起 作用 。 还 提 到 过 ngForm 会 自动 创建 它 自己 的 FormGroup。 
但 在 这 里 我 们 不 希望 使 用 外 部 的 Formcroup , 而 是 使 用 FormBuilder 创 建 的 这 个 myForm 实 例 变量 。 
那 该 怎么 做 呢 ? 

Angular 提 供 了 另 一 个 指令 ， 能 让 我 们 使 用 现 有 的 FormGroup 。 它 叫 作 formcroup ， 可 以 这 样 
使 用 。 


code/forms/app/ts/forms/demo_form_sku_with_builder.ts 








<h2 class="ui header">Demo Form: Sku with Builder</h2> 
<form [formGroup]="myForm" 


这 里 我 们 告诉 Angular， 想 用 myForm 作 为 这 个 表单 的 FormGroup。 


我 们 说 过 ， 当 使 用 FormsModule 时 ，NgForm 会 自动 应 用 于 <form> 元 素 上 。 但 其 
实 有 一 个 例外 : NgForm 不 会 应 用 到 带 formGroup 属 性 的 <form> 节 点 上 。 
你 也 许 不 明白 原因 ， 这 是 因为 NgForm 的 selector 是 : 


form:not( [ngNoForm] ):not( [formGroup] ),ngForm, [ngForm] 


这 意味 着 你 还 可 以 使 用 ngNoForm 属 性 产生 一 个 不 带 NgForm 的 <form> 表单。 





我 们 还 需要 把 onSubmit 中 的 f 蔡 换 为 nyForm， 因 为 现在 的 myForm 变 量 中 保存 着 表单 的 配置 
和 值 。 


想 让 程序 运行 起 来 ， 还 要 做 最 后 一 件 事 : 将 我 们 的 Formcontrol 绑 定 到 input 标 签 上 。 记 住 ， 


ngControl 会 创建 一 个 新 的 FormControl 对 象 ， 并 附加 到 父 Formcroup 中 。 但 在 这 个 例子 中 , 我 们 
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已 经 用 FormBuilder 创 建 了 自己 的 FormControl。 
要 将 现 有 的 FormControl 绑 定 到 input 上 ， 可 以 用 formControl。 


code/forms/app/ts/forms/demo_form_sku_with_builder.ts 


«label for="skuInput">SKU</label> 
<input type="text" 
id="skuInput" 
placeholder="SKU" 
[formControl ]="myForm.controls['sku']"> 


在 这 里 ， 我 们 将 input 标 签 上 的 formcontrol 指令 指向 了 myForm.controls 上 现 有 的 
FormControl 控件 sku b 


553 WWE 
将 上 面 的 所 有 代码 整合 在 一 起 。 


code/forms/app/ts/forms/demo_form_sku_with_builder.ts 


import { Component } from 'Gangular/core'; 
import { 

FormBuilder, 

FormGroup 
} from 'Gangular/forms'; 


@Component ( { 
selector: 'demo-form-sku-builder', 
template: ^ 
«div class="ui raised segment"» 
«h2 class="ui header"»Demo Form: Sku with Builder</h2> 
«form [formGroup]="myForm" 
(ngSubmit)-"onSubmit(myForm.value)" 
class-"ui form"» 


«div class="field"> 
«label for="skuInput">SKU</label> 
«input type="text" 
id-"skuInput" 
placeholder="SKU" 


[ formControl ]="myForm.controls['sku']"> 
</div> 


«button type="submit" class="ui button"»Submit«/button» 
</form> 


</div> 

}) 

export class DemoFormSkuBuilder { 
myForm: FormGroup; 
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constructor(fb: FormBuilder) { 
this.myForm = fb.group({ 
'sku': ['ABC423'] 


}); 
j 
onSubmit(value: string): void { 
console.log('you submitted value: ', value); 
j 
j 
你 需要 记 住 以 下 两 点 。 








如 果 想 隐 式 创建 新 的 FormGroup 和 FormControl， 使用: 





U ngForm 
U ngModel 














如 果 要 绑 定 一 个 现 有 的 FormGroup 和 FormControl， 使用: 


Q formGroup 
口 formControl 





5.6 添加 验证 


用 户 输入 的 数据 格式 并 不 总 是 正确 的 ,如 果 有 人 输入 了 错误 的 数据 格式 ,我 们 希望 给 他 反馈 ， 
并 阻止 他 提交 表单 。 因 此 ， 我 们 要 用 到 验证 器 。 
































验证 器 由 Validators 模 块 提供 。 Validators .required 是 最 简单 的 验证 , 表明 指定 的 字段 是 
必 填 项 ， 否 则 就 认为 这 个 FormControl 是 无 效 的 。 


想 使 用 验证 器 ， 我 们 得 做 两 件 
(1) AFormControl 对象 指 定 一 个 验证 吉 ; 
(2) 在 视图 中 检查 验证 器 的 状态 ， 并 据 此 采取 行动 。 


要 为 FormControl 对 象 分 配 一 个 验证 器 ， 我 们 可 以 直接 把 它 作为 第 二 个 参数 传 给 
FormControl 的 构造 函数 。 

















iini 


T 














let control - new FormControl('sku', Validators.required); 


也 可 以 像 这 个 例子 中 一 样 通过 如 下 语法 使 用 FormBuilder。 




















code/forms/app/ts/forms/demo form with validations explicit.ts 
constructor(fb: FormBuilder) { 
this.myForm = fb.group({ 
'sku': ['', Validators.required] 


5; 
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this.sku - this.myForm.controls['sku']; 


} 
现在 要 在 视图 中 使 用 验证 了 。 在 视图 中 访问 验证 的 值 有 以 下 两 种 方法 。 


(1) 我 们 可 以 显 式 地 把 sku 这 个 FormControl 赋 值 给 类 的 实例 变量 。 这 有 点 喝 味 ,但 便于 我 们 
在 视图 中 访问 这 个 FormControl 。 


(2) 我 们 也 可 以 在 myForm 中 查找 sku 这 个 FormControl。 这 样 能 简化 组 件 类 中 的 工作 , 但 在 视 
图 中 会 稍微 麻烦 些 。 


为 了 说 明 两 者 之 间 的 差异 ， 我 们 来 看 两 个 例子 。 














5.6.1 显 式 地 把 sku 设置 为 实例 变量 
图 5-3 展 示 了 这 个 带 验 证 功能 的 表单 应 该 是 什么 样子 的 。 





@ © @ / Parnguiar2- Forms: Forms | x ng-book 


Œ D localhost:8080 RS 





Bess Angular 2 Forms Example 


Demo Form: with validations (explicit) 





图 5-3” 带 验证 器 的 演示 表单 


在 视图 中 ， 处 理 单个 FormControls 的 最 灵活 的 方式 是 将 每 个 Formcontrol 都 定义 在 组 件 类 
上 。 把 sku 定 义 在 类 上 的 代码 如 下 所 示 。 




















code/forms/app/ts/forms/demo form with validations explicit.ts 


export class DemoFormWithValidationsExplicit { 
myForm: FormGroup; 
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sku: AbstractControl; 


constructor(fb: FormBuilder) { 
this.myForm = fb.group({ 
'sku': ['', Validators.required] 


5; 


this.sku = this.myForm.controls['sku']; 


} 
onSubmit(value: string): void { 
console.log('you submitted value: ', value); 
} 
} 
注意 : 





(1) 我 们 在 类 的 顶部 设置 sku: AbstractControl; 
(2) 我 们 把 用 FormBuilder 创 建 的 myForm 赋 值 给 this.sku 变 量 。 


非常 好 ， 这 意味 着 我 们 可 以 在 组 件 视 图 中 到 处 引用 sku 了 。 不 过 这 样 做 有 一 个 缺点 : 我 们 不 
得 不 为 表单 中 的 每 个 字段 定义 一 个 实例 变量 。 对 大 型 表单 而 言 ， 这 会 显得 相当 嗓 嗪 。 


现在 我 们 的 sku 可 以 得 到 验证 了 。 我 们 要 以 四 种 不 同 的 方式 把 它 用 在 视图 中 : 
(1) 检查 整个 表单 的 有 效 性 并 显示 一 条 错误 信息 ; 

(2) 检查 单个 字段 的 有 效 性 并 显示 一 条 错误 信息 ; 

(3) 检查 单个 字段 的 有 效 性 ， 当 字段 无 效 时 将 字段 显示 为 红色 ; 

(4) 检查 单个 字段 在 特定 规则 下 的 有 效 性 并 显示 一 条 错误 信息 。 

1. 表单 信息 

我 们 可 以 通过 myForm.valid 来 检查 整个 表单 的 有 效 性 。 


code/forms/app/ts/forms/demo_form_with_validations_explicit.ts 











«div «xngI f="!sku.valid" 
class="ui error message">SKU is invalid</div> 


记 住 , myForm 是 一 个 FormGroup; 只 有 当 里 面 所 有 的 FormCcontrol 都 有 效 时 , 这 个 FormGroup 
才 有 效 。 

2. 字段 信息 

当 字 段 的 FormControl 无 效 时 ， 我 们 也 可 以 为 该 字段 显示 一 条 错误 信息 。 





code/forms/app/ts/forms/demo form with validations explicit.ts 


«div «ngIfz"!sku.valid" 
class-"ui error message">SKU is invalid«/div» 
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«div «ngIfz2"sku.hasError('required')" 
class-"ui error message">SKU is required</div> 


3. 字段 着 色 


这 人 UICSS 框 架 的 CSS 类 .error 。 当 给 cdqiv class= "fieldq"y 节 点 加 上 CSS 
类 error 时 ， 这 个 输入 框 就 会 带 有 红色 的 边框 。 


我 们 可 以 使 用 这 种 “属性 语法 ”来 有 条 件 地 设置 这 个 CSS 类 。 


code/forms/app/ts/forms/demo form with validations explicit.ts 


























[HI 








<div class="field" 
[class.error]-"!sku.valid && sku.touched"» 


主意 ， 这 里 我 们 为 .error 类 设置 了 两 个 条 件 : 检查 !sku.valid 和 sku.touched。 这 是 因为 我 
eae 1 有 当 用 户 修改 过 表单 后 ( touched ) 才 显 示 错 误 状 态 。 


试 着 在 input 标 签 中 输入 一 些 数据 ， 然 后 删除 这 个 字段 的 内 容 。 
4. 特定 验证 


可 能 有 很 多 原因 导致 一 个 表单 字段 无 效 。 对 于 失败 的 验证 , 我 们 通常 布 望 根据 不 同 的 原因 显 
示 不 同 的 消息 。 


我 们 可 以 用 hasError 方 法 来 检查 特定 的 验证 失败 。 


code/forms/app/ts/forms/demo form with validations explicit.ts 














«div «ngIfz2"sku.hasError('required')" 
class-"ui error message">SKU is required</div> 


注意 ，FormControl 和 FormGroup 都 定义 了 hasError 方 法 。 这 意味 着 我 们 可 以 给 它 传 人 第 二 
个 参数 path 来 在 FormGroup 中 查询 特定 的 字段 。 比 如 可 以 这 样 写 : 


«div *ngIlf="myForm.hasError('required', 'sku')" 
class="error">SKU is required«/div» 





5. 整合 
下 面 是 我 们 把 FormControl 用 作 实 例 变量 来 实现 验证 功能 的 完整 代码 。 


code/forms/app/ts/forms/demo form with validations explicit.ts 














/* tslint:disable:no-string-literal */ 
import { Component } from 'Gangular/core'; 
import { 

FormBuilder, 

FormGroup, 

Validators, 

AbstractControl 
} from 'Gangular/forms'; 


@Component ( { 
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selector: 'demo-form-with-validations-explicit', 
template: ^ 
«div class="ui raised segment"» 
«h2 class="ui header"»Demo Form: with validations (explicit)«/h2» 
«form [formGroup]="myForm" 
(ngSubmit )="onSubmit(myForm. value)" 
class="ui form"» 


<div class="field" 
[class.error]="!sku.valid && sku.touched"» 
«label for="skuInput">SKU</label> 
«input type="text" 
id="skuInput" 
placeholder="SKU" 
[formControl ]="sku"> 
<div *ngI f="!sku.valid" 
class="ui error message">SKU is invalid«/div» 
«div *ngl f="sku.hasError('required' )" 
class="ui error message">SKU is required</div> 
</div> 





«div xngI f="!myForm.valid" 
class="ui error message">Form is invalid</div> 


«button type="submit" class="ui button"»Submit«/button» 
</form> 


</div> 


}) 

export class DemoFormWithValidationsExplicit { 
myForm: FormGroup; 
sku: AbstractControl; 


constructor(fb: FormBuilder) { 
this.myForm = fb.group({ 
sku': ['', Validators.required] 


this.sku = this.myForm.controls['sku']; 


} 


onSubmit(value: string): void { 
console.log('you submitted value: ', value); 


} 
} 


6. 移 除 sku 实 例 变 量 


在 上 面 的 例子 中 ， 我 们 将 sku: AbstractControl 设 置 为 一 个 实例 变量 。 通 常 ， 我 们 不 希望 
为 每 一 个 AbstractControl 控 件 都 创建 一 个 实例 变量 。 在 没有 实例 变量 的 情况 下 ， 我们 该 如 何在 
视图 中 引用 FormControl 呢 ? 
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我 们 可 以 改 用 myForm. controls/B TE. 


code/forms/app/ts/forms/demo form with validations shorthand.ts 








«input type="text" 
id="skuInput" 
placeholder="SKU" 
[formControl]-"myForm.controls['sku']"» 
ImyForm.controls['sku'].valid" 
error message" »SKU is invalid«/div» 
myForm.controls['sku'].hasError('required')" 
error message" »SKU is required«/div» 


«div xngIf=" 
class="ui 
<div *xngI f=" 
class="ui 





通过 这 种 方式 ， 我 们 就 不 用 被 迫 在 组 件 类 中 显 式 定 义 实例 变量 来 访问 sku 控 件 了 。 
5.6.2 ” 自 定义 验证 器 
我 们 经 常 要 写 一 些 自 定 义 验 证 器 ， 下 面 来 看 看 如 何 实现 。 
要 明白 如 何 实现 自己 的 验证 器 , 不 妨 看 看 Angular 源 代码 中 是 如 何 实现 Validators . requi rea : 





export class Validators { 
static required(c: FormControl): StringMap<string, boolean> { 


return isBlank(c.value) || c.value == "" ? {"required": true} : null; 


j 
— SEA : 


OQ 接收 一 个 FormControl 作 为 输入 ; 
口 当 验 证 失败 时 ， 会 返回 一 个 StringMap<string，boolean> 对 象 ， 它 的 键 是 “错误 代码 ”， 








值 是 true o 


1. 编写 验证 器 
假设 我 们 的 sku 有 特殊 的 验证 需求 , 比如 sku 必 须 以 123 作 为 开始 。 我 们 写 的 验证 需 是 这 样 的 : 


code/forms/app/ts/forms/demo form with custom validations.ts 


function skuValidator(control: FormControl): { [s: string]: boolean } { 


if (!control.value.match(/^123/)) ( 
return {invalidSku: true}; 
} 
} 
当 输 入 值 (控件 的 值 control .value ) 不 是 以 123 作 为 开始 时 ， 验 证 器 会 返回 错误 代码 

















invalidSku。 

2. 4FormControl 分 配 验证 器 

现在 要 为 FormControl 添 加 验证 ， 但 是 有 一 个 小 问题 : sku 已 经 有 一 个 验 订 
在 同一 个 字段 上 添加 多 个 验证 器 呢 ? 


Ed f. “BREA RE 
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我 们 可 以 用 validators.compose 来 实现 。 


code/forms/app/ts/forms/demo form with custom validations.ts 


constructor(fb: FormBuilder) { 
this.myForm = fb.group({ 
'sku': ['', Validators.compose( [ 
Validators.required, skuValidator] ) ] 


5; 


Validators.compose 把 两 个 验证 器 包装 在 一 起 ， 我 们 可 以 将 其 赋值 给 FormControl。 只 有 当 
两 个 验证 都 合法 时 ，FormControl 才 是 合法 的 。 


现在 就 能 在 视图 中 使 用 这 个 新 的 验证 屁 


code/forms/app/ts/forms/demo form with custom validations.ts 

















«div *xngIf="sku.hasError('invalidSku')" 
class="ui error message">SKU must begin with <span>123</span></div> 


e» 注意 ， 我 们 在 本 节 中 为 每 个 FormControl 都 显 式 添 加 了 实例 变量 。 这 意味 着 ， 
在 本 节 的 视图 中 sku 引 用 的 是 一 个 FormControl 。 


运行 示例 代码 , 你 会 注意 到 有 一 点 很 奇妙 妙 : : 当 你 在 字 眉 中 输入 一 些 内 容 时 ， 满足 了 required 


验证 ， 但 违反 了 invalidsku 验 证 。 棒 极 了 ， 这 意味 着 我 们 可 以 对 字段 进行 部 分 验证 并 显示 相应 
的 信息 。 








5.7 监听 变化 


到 目前 为 止 , 我 们 只 在 提交 表单 时 才 调 用 onSubmit 方 法 来 获取 表单 的 值 。 但 我 们 也 要 经 常 监 
听 控 件 的 变化 。 


Formcroup 和 FormControl 都 带 有 EventEmitter( 事件 发 射 器 ), 我 们 可 以 通过 它 来 观察 变化 。 








e EventEmitter 是 一 个 可 观察 对 象 ， 符 合 “变化 监听 ”规范 。 如 果 你 对 可 观察 对 
象 的 规范 感 兴趣 ， 可 以 参见 https://github.com/jhusain/observable-spec。 

想 监 听 控 件 的 变化 ， 我 们 要 : 

(1) 通过 调用 control .valueChanges 访 问 到 这 个 EventEmitter; 

(2) 然后 使 用 .subscribe 方 法 添加 一 个 监听 器 。 

下 面 是 一 个 例子 。 
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code/forms/app/ts/forms/demo form with events.ts 


constructor(fb: FormBuilder) { 
this.myForm = fb.group({ 
'sku': ['', Validators.required] 


; 
this.sku - this.myForm.controls['sku']; 


this.sku.valueChanges.subscribe( 
(value: string) => { 
console.log('sku changed to:', value); 
j 
m 
this.myForm.valueChanges.subscribe( 
(form: any) => { 
console.log('form changed to:', form); 


} 
J 


} 
在 这 里 我 们 监听 了 两 个 事件 : sku 字 段 的 变化 和 整个 表单 的 变化 。 
我 们 传递 了 一 个 带 有 next 键 的 对 象 (也 可 以 传递 其 他 键 ， 但 目前 还 不 用 关心 它们 ) next it 
是 我 们 希望 当 值 发 生变 化 时 被 调用 的 函数 。 
如 果 在 输入 框 中 输入 kj， 就 会 在 控制 台中 看 到 : 
sku changed to: k 
form changed to: Object {sku: "k"} 


sku changed to: kj 
form changed to: Object {sku: "kj"} 




















如 你 所 见 ， 每 一 次 按键 都 会 触发 控件 的 变化 ， 我 们 的 可 观察 对 象 也 会 被 触发 。 监 听 单 个 
FormControl 时 ， 我 们 会 得 到 一 个 值 (例如 kj ); 而 监听 整个 表单 时 ， 我 们 会 得 到 一 个 包含 键 值 
对 的 对 象 (例如 {sku: "kj"} )。 





5.8 ngModel 


ngMode1 是 一 个 特殊 的 指令 , 它 将 模型 绑 定 到 表单 中 。 ngMode 1 的 特殊 之 处 在 于 它 实现 了 双向 
绑 定 。 相 对 于 单 向 绑 定 来 说 ， 双 向 绑 定 更 加 复杂 和 难以 推断 。Angular 通 常 的 数据 流向 是 单 向 的 : 
自 顶 向 下 。 但 对 于 表单 来 说 ， 双 向 绑 定 有 时 会 更 容易 。 








不 要 仅仅 因为 你 以 前 在 AngularJS 中 用 过 ng-model 而 急于 使 用 ngModel ， 因 为 有 
很 多 避免 使 用 双向 绑 定 的 理由 。 当 然 ，ngModel 确 实用 起 来 更 方便 ， 但 要 记 住 
Angular 已 经 不 像 AngularJS 那 样 必 须 依 赖 双向 绑 定 了 。 
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下 面 对 表 单 稍 作 修改 : 我 们 希望 能 输入 产品 名 称 productName。 这 次 要 用 ngMode1l 来 保持 组 
件 实例 和 视图 的 同步 。 


首先 ， 我 们 的 组 件 定义 类 如 下 所 示 。 


code/forms/app/ts/forms/demo form ng model.ts 


export class DemoFormNgModel { 
myForm: FormGroup; 
productName: string; 


constructor(fb: FormBuilder) { 
this.myForm = fb.group({ 
'productName': ['' 
}); 
j 


, Validators.required] 





onSubmit(value: string): void { 
console.log('you submitted value: ', value); 


j 
} 


， 我 们 只 是 简单 地 将 productName: string 存 成 了 实例 变量 。 
紧 接 着 ， 我 们 在 input 标 签 上 使 用 ngModel 。 





code/forms/app/ts/forms/demo_form_ng_model.ts 


«label for="productNameInput">Product Name«/label» 
«input type="text" 

id="productNameInput" 

placeholder="Product Name" 

[ formControl ]="myForm.get('productName' )" 

[ (ngModel ) ]="productName" > 





意 ， 这 里 ngModel 的 语法 很 有 意思 : 我 们 在 ngMode1l 属 性 上 同时 使 用 了 () 和 [] 。 我 们 既 使 


日 了 表示 输入 属性 (@Input ) 的 方 括号 [] ， 又 使 用 了 表示 输出 属性 (@output ) 的 圆 括号 ()， 这 
就 是 双 回 绑 定 的 标志 。 





So 




















另外 还 需要 注意 的 是 : 我 们 仍然 用 formcontrol 48 4E lE input M 1X BP XE BI Ze HL B5) 


FormControl 。 这 是 因为 ngModel 只 负责 将 input 绑 定 到 对 象 实例 上 ， 但 Formcontrol 的 功能 是 与 
此 独立 的 。 由 于 我 们 还 需要 对 这 个 值 加 以 验证 并 把 它 作 为 表单 的 一 部 分 提交 上 去 ， 仍 要 保留 


formControl 指 令 。 



































最 后 ， 我 们 把 产品 名 称 productName 值 显示 在 视图 中 。 








code/forms/app/ts/forms/demo_form_ng_model.ts 


<div class="ui info message"> 


The product name is: {{productName} } 
</div> 
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运行 效果 图 如 图 $-4 所 示 。 








@ © O / Barnguiar2- Forms: Forms: x \\ 





CŒ | D localhost:8080 
Elements Console Sources Network Timeline » 


Be Angular 2 Forms Example 


RO 


© Y <topframe> v O Preserve log 





you submitted value: 
Object (productName: "Blue Widget") 


Demo Form: with ng-model 
The product name is: Blue Widget 


Product Name 


Blue Widget 


Submit 





图 5-4” 带 ngMode1 的 演示 表单 





很 简单 吧 ! 


5.9 m 
表单 有 很 多 零碎 的 知识 ,但 Angular 让 它 变 得 非常 简明 。 只 要 我 们 掌握 了 如 何 使 用 Formcroup 、 


FormControl 和 Validation ， 它 就 变 得 非常 容易 了 ! 


第 6 章 


HTTP 








6.1 简介 
Angular 有 自己 的 HTTP 库 ， 我 们 可 以 用 它 来 调用 外 部 的 API。 


当 应 用 对 外 部 服务 器 发 出 请 求 时 , 我 们 希望 用 户 能 继续 与 页 面 进行 交互 。 也 就 是 说 , 我 们 不 
希望 页 面 在 HITP 请 求 从 外 部 服务 器 返回 前 一 直 失 去 响应 。 因 此 ,我们 的 HTTP 请 求 是 异步 的 。 


一 直 以 来 ， 处 理 和 异步 代 码 比 处 理 同 步 代码 更 加 环 手 。 在 JavaScript 中 ， 通 常 有 3 种 处 理 异 步 代 
码 的 方式 : 


(1) 回调 (callback ) 
(2) 承诺 ( promise ) 
(3) 可 观察 对 象 ( observable ) 


在 Angular 中 ， 处 理 异 步 代 码 的 最 佳 方式 就 是 使 用 可 观察 对 象 ， 所 以 我 们 会 在 本 章 中 介绍 这 
种 方式 。 














关于 RxJS 和 可 观察 对 象 : 本 章 会 涉及 可 观察 对 象 的 使 用 ， 但 不 会 对 其 进行 过 多 
的 解释 。 第 10 章 会 通过 深入 解析 RxJS 来 讲解 可 观察 对 象 。 

在 本 章 中 ， 我 们 将 : 

(1) 展示 一 个 Http 的 基本 例子 ; 

(2) 创建 一 个 随 敲 随 搜 ( search-as-you-type ) 组 件 用 于 搜索 YouTube; 

(3) 讨论 Http 库 的 API 细 节 。 

O 示例 代码 本 章 所 用 示例 的 完整 代码 可 以 在 示例 代码 下 的 http 文 件 夹 中 找到 。 文 件 
夹 中 包含 一 个 README.md 文 件 ， 其 中 介绍 了 如 何 构建 及 运行 项 目 。 
在 阅读 本 章 时 ， 最 好 尝试 运行 一 下 相关 代码 。 请 随意 党 试 ， 以 深入 了 解 这 些 代 
码 的 工作 原理 。 
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6.2 ”使 用 @angular/http 





HTTP 在 Angular 中 被 拆 分 为 一 个 单独 的 模块 。 这 意味 着 你 需要 从 @angular/http 中 导入 一 些 
常量 。 比 如 ， 我 们 通常 会 像 下 面 这 样 导 入 @angular/http 中 的 常量 : 


import { Http, Response, RequestOptions, Headers } from '@angular/http'; 


M@angular/http 中 导入 
在 app.ts 代 码 中 ， 我 们 要 导入 HttpModule ， 这 是 一 个 便于 使 用 的 模块 集合 。 





code/http/app/ts/app.ts 


/* 


x Angular 


*/ 


import { 
Component 
} from 'Gangular/core'; 
import ( NgModule } from '@angular/core'; 


import 
import 


import { HttpModule } from 'Gangular/http'; 


我 们 把 HttpModule 作 为 依赖 项 , 加 入 NgModule 的 imports 列 表 之 中 。 这 样 就 可 以 把 Http ( 和 
另外 一 些 模块 ) 导入 组 件 之 中 。 


code/http/app/ts/app.ts 


@NgModule( { 
declarations: [ 


l, 


HttpApp, 
SimpleHTTPComponent, 
MoreHTTPRequests, 
YouTubeSearchComponent, 
SearchBox, 
SearchResultComponent 


imports: [ 


], 


BrowserModule, 
HttpModule // «--- right here 


bootstrap: [ HttpApp ], 
providers: [ 


] 
}) 


youTubeServiceInjectables 





class HttpAppModule {} 





{ BrowserModule } from 'Gangular/platform-browser'; 
{ platformBrowserDynamic } from 'Gangular/platform-browser-dynamic'; 














现在 就 可 以 把 Http 服 务 注入 到 组 件 中 了 。( 实际 上 也 可 以 月 














在 任何 使 用 依赖 注入 的 地 方 。) 
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class MyFooComponent { 
constructor(public http: Http) { 
j 
makeRequest(): void ( 


// do something with this.http ... 


} 
} 


6.3 基本 请 求 


首先 做 的 就 是 向 jsonplaceholder AP 发 起 一 个 简单 的 GET 请 求 。 
我 们 要 做 的 是 : 

(1) 有 一 个 调用 makeRequest 的 button ; 

(2) makeRequest 会 调用 http 库 向 API 发 起 一 个 GET 请 求 ; 

(3) 当 请 求 返 回 时 ,使 用 返回 结果 中 的 数据 更 新 this .data。 

该 示例 的 截图 如 图 6-1 所 示 。 

















Basic Request 
Make Request 


{ 
"userId": 1, 
Eddie, 
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", 
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehende 
rit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto" 


} 

















图 6-1 ”基本 请 求 


6.3.1 构建 SimpleHTTPComponent 的 @Component 


首先 要 导入 一 些 模 块 ， 然 后 指定 @Component 的 selector。 


code/http/app/ts/components/SimpleH TTPComponent.ts 
/* 


* Angular 


*/ 





(D http://jsonplaceholder.typicode.com 
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import {Component} from 'Gangular/core'; 
import {Http, Response} from '@angular/http'; 


@Component ( f 
selector: 'simple-http', 


6.3.2 ”构建 SimpleHTTPComponent 的 template 
然后 构建 视图 。 





code/http/app/ts/components/SimpleHTTPComponent.ts 


template: ^ 

«h2»Basic Request«/h2» 

«button type="button" (click)-2"makeRequest()"»Make Request«/button» 
«div xngIf-"loading"»loading...«/div» 

<pre>{{data | json}}</pre> 











要 注意 这 里 使 用 了 ngIf 指 令 。 

模板 中 有 三 个 有 趣 的 部 分 : 

(1) button 

(2) 载 人 指示 器 

(3) data 

我 们 将 控制 器 中 的 makeRequest 函数 绑 定 到 button 的 (click) 上 , 稍 后 会 对 这 个 函数 进行 定义 。 

我 们 要 向 用 户 说 明 请 求 正在 处 理 中 ， 所 以 需要 在 变量 10ading 为 true 的 时 候 , 使 用 ngIf 来 显 
示 loading...。 

data 是 一 个 0bject。 这 里 使 用 了 json 管 道 , 这 是 一 种 非常 棒 的 输出 调试 方式 。 把 这 段 代 码 放 
进 pre 标 签 内 就 可 以 获得 漂亮 、 易 读 的 格式 。 

















6.3.8 构建 SimpleHTTPComponent 控制 器 


我 们 先 为 SimpleHTTPComponent 定 义 一 个 新 的 class。 


code/http/app/ts/components/SimpleHTTPComponent.ts 


export class SimpleHTTPComponent { 
data: Object; 
loading: boolean; 


现在 ， 我们 已 经 有 了 data 和 1oading 这 两 个 实例 变量 。 它 们 将 分 别 用 来 存储 API 返 回 的 数据 
值 与 表示 加 载 状 态 。 





然后 定义 constructor 7 


code/http/app/ts/components/SimpleH TTPComponent.ts 


constructor(private http: Http) { 
} 


constructor 的 方法 体 是 空 的 ， 我们 要 注入 一 个 关键 模块 Http。 








Q, 需要 记 住 , 当 我 们 在 public http: Http 中 使 用 public 关 键 字 的 时 候 , TypeScript 
会 将 http 赋 值 给 this.http。 它 是 下 面 这 种 写法 的 简写 : 


// other instance variables here 
http: Http; 


constructor(http: Http) { 
this. http = http; 
} 





现在 ， 我 们 就 通过 实现 makeRequest 函数 来 发 起 第 一 个 HTTP 请 求 。 


code/http/app/ts/components/SimpleH TTPComponent.ts 


makeRequest(): void { 
this.loading = true; 
this. http.request('http://jsonplaceholder .typicode.com/posts/1' ) 
.subscribe((res: Response) => { 
this.data = res. json(); 
this.loading = false; 
; 
j 


当 我 们 调用 makeRequest 时 ， 首 先 要 设置 this.1oading = true。 这 会 在 页 面 上 显示 载 人 指 
ZI o 


发 起 HTTP 请 求 的 方式 非常 简明 : 调用 this .http.request 并 传人 URL 作 为 GET 请 求 的 参数 。 


http request 会 返回 一 个 observable 对 象 。 我 们 可 以 使 用 subscribe 订 阅 变 化 (类似 于 在 一 
个 promise 上 使 用 then )。 











code/http/app/ts/components/SimpleH TTPComponent.ts 


this.http.request('http://jsonplaceholder.typicode.com/posts/1 ' ) 
.subscribe((res: Response) => { 


“http.request (MIRA at) 返回 一 个 流 时 ， 它 就 会 发 出 一 个 Response 对 象 。 我 们 用 json 
i m 然后 将 这 个 Object 赋值 给 this.data。 


只 要 我 们 得 到 了 响应 ,就 不 会 再 加 载 任何 东西 了 ,所 以 这 里 需要 设置 this.1loading = false. 
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Qs .subscribe 同 样 可 以 处 理 失败 和 流 完结 的 情况 ， 只 要 分 别 在 第 二 和 第 三 个 参数 


用 来 说 ， 处 理 这 | 育 况 是 个 好 
主意 。 当 请 求 失败 ( 即 流 中 发 生 错 误 ) 的 时 候 ，this.1oading 也 应 当 被 设置 为 


中 传 入 一 个 函数 就 可 以 了 。 对 于 一 个 产品 级 应 用 


false。 


6.3.4 完整 的 SimpleHTTPComponent 
下 面 就 是 完整 的 SimpleHTTPComponent 


code/http/app/ts/components/SimpleHTTPComponent.ts 
/* 
* Angular 
*/ 
import {Component} from 'Gangular/core'; 
import {Http, Response} from '@angular/http'; 


@Component ( { 
selector: 'simple-http', 
template: ^ 
«h2»Basic Request«/h2» 


«button type="button" (click)-2"makeRequest()"»Make Request«/button» 


«div xngIf-"loading"»loading...«/div» 
<pre>{{data | json}}</pre> 


}) 

export class SimpleHTTPComponent { 
data: Object; 
loading: boolean; 


constructor(private http: Http) { 
} 


makeRequest(): void { 
this.loading = true; 


this. http.request('http://jsonplaceholder .typicode.com/posts/1' ) 


.subscribe((res: Response) => { 
this.data = res. json(); 
this.loading = false; 


}); 


6.4 编写 YouTubeSearchComponent 

















上 一 个 例子 是 从 代码 中 获取 API 服 务 器 上 数据 的 最 简 方 式 。 
的 例子 。 


现在 我 们 要 尝 
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在 这 一 节 里 ， 我 们 会 打造 一 个 随 着 输入 搜索 YouTube 的 组 件 。 当 搜索 结果 返回 时 ， 通 过 一 个 
列表 来 展示 每 一 个 视频 的 缩 略 图 、 描 述 和 链接 。 


搜索 cats playing ipads 时 的 屏幕 截图 如 图 6-2 所 示 。 





YouTube Search 


cats playing ipads| 





1.40 “SS. 





Funny Cats Playing Animals Playing On Cute cats try to Charlie The Cat - 

On iPads iPads Compilation catch a mouse from Kitten Playing iPad 2 

Compilation - Funny You may or may not be surprised, an IPad !! Game For Cats 

Videos 2015 but there are many mien pane Cute cats try to catch a mouse from Cute Funny Clever 
tablet uter. Us 

You may or may not be surprised, Me an IPad. Pets Bloopers 

but there are many animals playing http//www.facebook.com/Compilariz Watch HELLO REDDIT, Thanks for the 

on tablet computer. New video funny No... support! More Charlie the Cat Videos 

2015 Thanks for watching, rating the 


- http://youtu.be/xZHwYNrfWd0 
Check My Other Videos Kitten 
HArlem Shake ... 


video and ... Watch 


Watch 


Watch 





Cats playing "Game White Tiger Plays Cat Plays with iPad - Cute Cat plays on 
for Cats" with Apple iPad - Game for Cats Friskies Games for iPad 

iPad Gone Wild! Lions, Cats Cute Cat plays on iPad. 

Two Siberian cats like to play "Game servals, and more! Mr. Kitty playing Cat Fishing on my 


for Cats" with Apple iPad :) Note that girlfriends 1st gen iPad, via Friskies WaR 


the iPad has Invisible Shield screen ind Games for Cats 
protector. Siperiankissat leikkivät ii http://www.gamesforcats.com. 


图 6-2 ”能 让 我 的 猫咪 写 Angular 吗 
在 这 个 例子 中 ， 我 们 要 实现 下 列 功能 : 
(1) 一 个 SearchResult 对 象 ， 用 于 存放 每 条 搜索 结 
(2) 一 个 YouTubeService 服 务 ， 用 于 管理 向 YouTube 的 API 发 出 的 请 求 并 将 结果 转 成 一 个 


SearchResult [] jit; 
(3) 一 个 SearchBox 组 件 ， 用 于 根据 用 户 输入 内 容 调用 YouTube 服 务 ; 
(4) 一 个 SearchResultComponent 组 件 ， 用 于 泻 染 具 体 的 SearchResult 结 果 ; 
(5) 一 个 YouTubeSearchComponent 组 件 ， 封 装 整 个 YouTube 搜 索 功 能 并 演 染 结果 列表 。 
下 面 逐 一 处 理 每 个 部 分 。 


http://www.ipadgameforcats.com 
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o Patrick Stapleton 维 护 着 一 个 非常 棒 的 代码 仓库 angular2-webpack-starter o 里面 有 
使 用 RxJS 实 现 搜索 GitHub 仓 库 时 自动 补 全 的 示例 。 本 节 中 的 一 些 想 法 就 是 受 这 
个 示例 的 启发 。 它 是 个 包含 各 种 示例 的 酷 炫 项 目 ， 也 许 你 该 看 一 下 。 


6.4.1 编写 SearchResult 


我 们 先 从 编写 一 个 基本 的 SearchResult 类 开始 。 这 个 类 为 我 们 存储 搜索 结果 中 一 些 感 兴 趣 
的 字段 提供 了 一 种 便捷 的 方式 。 


code/http/app/ts/components/YouTubeSearchComponent.ts 

















class SearchResult { 
id: string; 
title: string; 
description: string; 
thumbnailUrl: string; 
videoUrl: string; 


constructor(obj?: any) 
this.id 
this.title 
this.description 
this. thumbnailUr1l 
this.videoUrl 


obj && obj.id || null; 
obj && obj.title || null; 
obj && obj.description || null; 
obj && obj.thumbnailUrl || null; 
obj && obj.videoUrl || 

“https: //www. youtube. com/watch?v=${this.id}*; 


Hoo H H dg ce 


} 
} 


这 里 使 用 obj?: any 方 式 来 模拟 关键 词 参数 。 我 们 可 以 创建 一 个 新 的 SearchResult 并 且 只 传 
入 一 个 包含 指定 键 的 对 象 。 

唯一 要 特别 指出 的 是 , 我 们 在 构造 videoUr1 时 使 用 了 硬 编码 的 URL 格 式 。 你 也 可 以 将 其 重 构 
为 一 个 根据 多 个 参数 来 生成 路 径 的 函数 ， 或 者 直接 在 视图 中 使 用 视频 的 id 来 构造 URL。 


























6.4.2 45 YouTubeService 


1. API 
在 这 个 例子 中 ， 我 们 将 使 用 YouTube 第 3 版 搜索 APT 。 





(D https://github.com/angular-class/angular2-webpack-starter 
(25 https://developers.google.com/youtube/v3/docs/search/list 
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o 为 了 使 用 这 个 API， 你 需要 一 个 API 密 钥 。 我 们 已 经 在 示例 代码 中 包含 了 一 个 
可 供 大 家 使 用 的 API 密 钥 。 尽 管 如 此 ， 当 你 读 到 这 里 的 时 候 ， 可 能 发 现 这 个 密 
铀 已 经 超过 了 使 用 频率 限制 。 如 果 是 这 样 的 话 ， 你 就 需要 去 生成 一 个 自己 的 
ZAT. 
要 生成 自己 的 密 钥 ,可 以 查看 文档 : https://developers.google.com/youtube/registe 
ring_an_application#Create API Keys。 为 了 简单 起 见 ， 我 已 经 注册 了 一 个 服务 
器 密 钥 ; 如 果 你 要 将 你 的 JavaScript 代 码 放 到 线 上 , 那么 还 需要 一 个 浏览 器 密 钥 。 





我 们 将 为 YouTubeService 设 置 两 个 用 来 表示 API 密 钥 和 API URL 的 常量 


let YOUTUBE_API_KEY: string 
let YOUTUBE API URL: string 


最 后 , 还 要 测试 一 下 应 用 。 我 们 并 不 希望 在 产品 环境 下 进行 测试 ,而 是 希望 测试 预 生产 或 开 
发 阶段 的 API。 


为 了 解决 这 个 环境 配置 问题 ， 我 们 就 要 让 这 些 常 量 可 被 注入 。 
文 些 常 


为 什么 要 注 人 这 些 常量 ， 而 不 是 像 平 常 那样 直接 使 用 呢 ? 这 是 因为 只 要 让 这 些 常 量 可 被 注 
我 们 就 能 : 


(1) 让 代码 在 部 署 的 时 候 根 据 所 选 环境 注 人 正确 的 常量 ; 

(2) 在 测试 期 更 容易 替换 要 注 人 的 值 。 

通过 注入 这 些 值 ， 我 们 将 获得 更 多 的 灵活 性 。 

为 了 让 这 些 值 可 被 注入 ， 我 们 使 用 { provide: ... , useValue: ... ]} 请 法 。 





"XXX, YOUR. KEY. HERE. XXX"; 
"https://www.googleapis.com/youtube/v3/search" ; 
































fall 


a 








code/http/app/ts/components/YouTubeSearchComponent.ts 


export var youTubeServiceInjectables: Array<any> = [ 
{provide: YouTubeService, useClass: YouTubeService}, 
{provide: YOUTUBE_API_KEY, useValue: YOUTUBE_API_KEY}, 
{provide: YOUTUBE_API_URL, useValue: YOUTUBE_API_URL} 
]; 


这 里 我 们 指定 ， 要 把 YouTuBE_API_KEY 的 值 绑 定 到 可 被 注入 的 YoOuTuBE_API_KEY 上 。 
(YOUTUBE_API_URL 也 一 样 ， 稍 后 还 们 还 将 定义 YouTubeService 。) 

也 许 你 还 记得 , 为 了 在 本 应 用 中 进行 依赖 注入 , 我 们 需要 将 其 放 人 NgModule 的 providers 里 。 
因为 这 os a E 所 以 就 能 在 app.ts 中 使 用 它 了 。 


// http/app.ts 
import { HttpModule } from '@angular/http'; 
import { youTubeServiceInjectables } from "components/YouTubeSearchComponent"; 
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// further down 
Af rias 


@NgModule( { 
declarations: 
HttpApp, 


[ 


// others .... 


], 
impor [ Br 
bootstrap: [ 
providers: [ 
youTubeServ 


LS : 


] 
}) 
class HttpAppMo 





owserModule, HttpModule ], 
HttpApp ], 


iceInjectables // «--- right here 


dule {} 





Site defi Vs Hj 


EBH. 
Hio 


HE 











直接 使 月 


FE 入 (来 自 youTubeServiceInjectables 的 ) YOUTUBE_API_KEY 的 方式 来 代替 


2. YouTubeService 构 造 函 数 





i 




















我 们 通过 编 











J 


个 class 并 使 月 





有 @Injectable 对 其 进行 注解 来 创建 YouTubeService。 


code/http/app/ts/components/YouTubeSearchComponent.ts 


/** 
* YouTubeServi 
* See: * https 
*/ 
@Injectable() 


ce connects to the YouTube API 
://developers.google.com/youtube/v3/docs/search/list 


export class YouTubeService { 
constructor(private http: Http, 
GInject(YOUTUBE API KEY) private apiKey: string, 
GInject(YOUTUBE API URL) private apiUrl: string) ( 


} 
我 们 在 constru 
(1) Http 
(2) YOUTUBE_AP 


(3) YOUTUBE_AP 


这 里 要 注意 ， 我 们 使 月 


ctor 中 注入 三 样 东西 : 





I_KEY 


I_URL 





sE. 
变量 。 





有 这 三 个 参数 创建 实例 这 意味 着 可 以 分 别 通 过 this.http、 





this.apiKey 和 this.apiUr1 来 访问 它们 。 


还 要 注意 ， 我 人 


] 使 用 @Inject(YOUTUBE_API_KEY) 进 行 显 式 注入 。 


3. YouTubeService 搜 索 
下 一 步 ， 我 们 来 实现 search 图 数 。search 传 人 一 个 要 查询 的 string 并 返回 一 个 会 发 出 


SearchResult[] 流 


的 Observable。 换 名 话说 ， 它 发 出 的 每 个 条 目 都 是 一 个 SearchResult 数 组 。 
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code/http/app/ts/components/YouTubeSearch Component.ts 


search(query: string): Observable«SearchResult[]» { 
let params: string - [ 
`q=${query}`, 
`key=${this.apiKey}`, 
`part=snippet`, 
^type-video', 
^maxResults-10^ 
]-join('&'); 
let queryUrl: string = ^$[this.apiUrl]?$[(params]'; 


这 里 使 用 了 手动 的 方式 来 构造 queryUr1。 我 们 简单 地 将 查询 参数 放 和 人 params 变 量 之 中 。( 你 
可 以 查阅 搜索 API 文 档 ?" 了 解 每 个 值 的 含义 。) 


然后 将 apiUr1 与 params 拼 接 起 来 作为 queryUr1。 
现在 就 有 了 一 个 可 以 用 来 发 起 请 求 的 queryUr1 f o 








code/http/app/ts/components/YouTubeSearchComponent.ts 


search(query: string): Observable<SearchResult[]> { 
let params: string = [ 
~q=${query}~, 
^key-$[this.apiKey]'^, 
^part-snippet', 
^type-video', 
^maxResults-10" 
]-join('&'); 
let queryUrl: string = ^$[this.apiUrl]?$(params]'; 
return this.http.get(queryUrl) 
.map((response: Response) => { 
return (<any>response. json()).items.map(item => { 
// console.log("raw item", item); // uncomment if you want to debug 
return new SearchResult({ 
id: item.id.videoId, 
title: item.snippet.title, 
description: item.snippet.description, 
thumbnailUrl: item.snippet.thumbnails.high.url 
DE 
D); 
2); 
} 


我 们 要 获取 http.get 的 返回 值 ， 并 用 map 来 从 请 求 中 获取 Response。 这 里 使 用 .json() 从 
response 中 提取 返回 体 并 同时 实例 化 成 一 个 对 象 。 然 后 遍历 每 一 个 项 目 并 将 其 转换 成 一 个 


SearchResult。 











(D https://developers.google.com/youtube/v3/docs/search/list 
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如 果 你 想 看 看 item 的 原始 值 ， 可 以 取消 对 console.10g 的 注释 ， 然 后 在 浏览 器 
的 开发 者 控制 台 检 查 输出 的 值 。 


注意 , 这 里 调用 了 (xany>response.json()).items。 这 是 在 干什么 ? 这 是 在 告 
诉 TypeScript， 我 们 并 不 想 在 这 里 进行 严格 的 类 型 检查 。 

当 我 们 使 用 JSON API 时 ， 通 常 并 没有 API 响 应 体 的 类 型 定义 信息 ， 所 以 
TypeScript 不 知道 返回 的 Object 中 会 有 一 个 items 键 。 因 此 ， 编 译 器 会 在 这 里 出 
问题 。 

我 们 也 可 以 调用 response. json()["items"] 并 将 其 转换 成 一 个 Array 类 型 ,但 
是 这 里 (以 及 创建 SearchResult 时 ) 将 其 作为 any 类 型 来 使 用 会 更 加 简洁 ， 只 
是 牺牲 了 一 点 类 型 检查 的 严格 性 。 


4. YouTubeService 的 完整 代码 





这 里 是 YouTubeService 的 完整 代码 。 


code/http/app/ts/components/YouTubeSearchComponent.ts 


/** 


* YouTubeSearchComponent is a tiny app that will autocomplete search YouTube. 


*/ 


import { 
Component, 
Injectable, 
OnInit, 
ElementRef, 
EventEmitter, 
Inject 
} from 'Gangular/core'; 
import { Http, Response } from 'Gangular/http'; 
import { Observable } from 'rxjs'; 


/* 


This API key may or may not work for you. Your best bet is to issue your own 
API key by following these instructions: 
https://developers.google.com/youtube/registering an applicationsCreate API KeN 


ys 
Here 


Note 
your 


*/ 


I've used a xxserver key** and make sure you enable YouTube. 


that if you do use this API key, it will only work if the URL in 
browser is "localhost" 


export var YOUTUBE API KEY: string = 'AIzaSyDOfT BO84aEZScosfTYMruJobmp jqNeEk' ; 
export var YOUTUBE API URL: string = 'https://www.googleapis.com/youtube/v3/searN 


ch'; 
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let loadingGif: string = ((«any»window).. karma  .) ? '' : require('images/loadin\ 
g.gif'); 


class SearchResult { 
id: string; 
title: string; 
description: string; 
thumbnailUrl: string; 
videoUrl: string; 


constructor(obj?: any) { 


this.id - obj && obj.id || null; 
this.title - obj && obj.title |] null; 
this.description - obj && obj.description || null; 
this.thumbnailUrl - obj && obj.thumbnailUrl || null; 
this.videoUrl - obj && obj.videoUrl E 


"https: //www.youtube.com/watch?v=${this.id}*; 





/** 
* YouTubeService connects to the YouTube API 
* See: * https://developers.google.com/youtube/v3/docs/search/list 
*/ 
@Injectable() 
export class YouTubeService { 
constructor(private http: Http, 
GInject(YOUTUBE API KEY) private apiKey: string, 
GInject(YOUTUBE API URL) private apiUrl: string) { 


】 


search(query: string): Observable<SearchResult[]> { 
let params: string = [ 
“q=${query}~, 
^key-$[this.apiKey])'^, 
^part-snippet', 
^type-video', 
^maxResults-10" 
]-join('&'); 
let queryUrl: string = ^$[this.apiUrl]?$[([params]'; 
return this.http.get(queryUrl) 
.map((response: Response) => { 
return (<any>response. json()).items.map(item => { 
// console.log("raw item", item); // uncomment if you want to debug 
return new SearchResult({ 
id: item.id.videold, 
title: item.snippet.title, 
description: item.snippet.description, 
thumbnailUrl: item.snippet.thumbnails.high.url 
J) 
}); 
; 
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export var youTubeServiceInjectables: Array<any> = [ 
{provide: YouTubeService, useClass: YouTubeService], 
{provide: YOUTUBE API KEY, useValue: YOUTUBE API KEY], 
{provide: YOUTUBE API URL, useValue: YOUTUBE API URL] 
]; 


/** 
* SearchBox displays the search box and emits events based on the results 


*/ 


@Component ( { 
outputs: ['loading', 'results'], 
selector: 'search-box', 
template: ^ 


«input type="text" class-"form-control" placeholder-"Search" autofocus» 


}) 
export class SearchBox implements OnInit { 
loading: EventEmitter<boolean> = new EventEmitter<boolean>(); 
results: EventEmitter<SearchResult[]> = new EventEmitter<SearchResult[]>(); 


constructor(private youtube: YouTubeService, 
private el: ElementRef) { 


} 


ngOnInit(): void { 
// convert the ~keyup~ event into an observable stream 
Observable. fromEvent(this.el.nativeElement, 'keyup') 
-map((e: any) => e.target.value) // extract the value of the input 
.filter((text: string) => text.length » 1) // filter out if empty 
. debounceTime(250) // only once every 250ms 
.do(() => this.loading.next(true) ) // enable loading 
// search, discarding old events if new input comes in 
.map((query: string) => this.youtube.search(query ) ) 
.switch() 
// act on the return of the search 
.subscribe( 
(results: SearchResult[]) => { // on sucesss 
this.loading.next(false); 
this.results.next(results); 
i 
(err: any) => { // on error 
console.log(err); 
this.loading.next(false); 
), 
() => { // on completion 
this.loading.next(false); 
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GComponent ( f 
inputs: ['result'], 
selector: 'search-result', 
template: ^ 


«div class="col-sm-6 col-md-3"» 
«div class="thumbnail"> 
<img src-"[íresult.thumbnailUrl]]"» 
«div class="caption"> 
«h3»(fresult.title]]«/h3» 
<p> ((result.description]]«/p» 
<p><a hrefz"([result.videoUrl]]" 
class="btn btn-default" role="button"> 
Watch«/a»«/p» 
«/div» 
«/div» 
«/div» 


}) 


export class SearchResultComponent { 
result: SearchResult; 


} 





@Component ( f 
selector: 'youtube-search', 
template: 
«div classz'container'» 
«div class-z"page-header"» 
«hi1»YouTube Search 
«img 
style-"float: right;" 
*ngI f="loading" 
src='${loadingGif}' /> 
«/h1» 
«/div» 


«div class="row"> 
«div class="input-group input-group-1g col-md-12"» 
«search-box 
(loading)="loading = $event" 
(results )="updateResults($event)" 
»«/search-box» 
«/div» 
«/div» 


«div class="row"> 
«search-result 
*ngFor="let result of results" 
[result]-"result"» 
«/search-result» 
«/div» 
«/div» 


}) 


export class YouTubeSearchComponent { 
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results: SearchResult[]; 


updateResults(results: SearchResult[]): void { 
this.results - results; 
// console.log("results:", this.results); // uncomment to take a look 


} 
} 


6.4.3 485 SearchBox 





SearchBox 组 件 在 应 用 中 扮演 着 关键 的 角色 : 它 是 UI 与 YouTubeService 的 中 间 连 接 层 。 
SearchBox 将 会 : 

(1) 观察 input 的 keyup 事 件 ， 并 向 YouTubeService 提 交 搜 索 ; 

(2) 在 正在 加 载 (或 者 不 再 加 载 ) 时 ， 触 发 一 个 10ading 事 件 ; 

(3) 在 获取 到 新 的 结果 时 ， 触 发 一 个 results 事 件 。 

1. 定义 SearchBox 的 @Component 

我 们 来 定义 SearchBox 的 @Component。 


code/http/app/ts/components/YouTubeSearchComponent.ts 


/** 
* SearchBox displays the search box and emits events based on the results 
*/ 

@Component ( { 
outputs: ['loading', 'results'], 


selector: 'search-box', 
我 们 之 前 已 经 见 过 很 多 次 selector 了 : 它 人 允许 我 们 创建 csearch-boxy> 标签 。 


outputs 指 定 了 将 从 组 件 中 触发 的 事件 ， 也 就 是 可 以 在 视图 中 使 用 (output)="callback()" 
语法 以 侦 听 组 件 中 的 事件 。 例 如 ， 下 面 是 我 们 将 在 视图 中 使 用 search-box 标 签 的 方式 : 
«search-box 
(loading)="loading = $event" 


(results )="updateResults($event)" 
»«/search-box» 














在 这 个 例子 中 ， 当 SearchBox 组 件 触发 一 个 loading 事 件 时 ， 我 们 要 设置 父 上 下 文中 的 
loading 变 量 。 同 样 ， 当 SearchBox 组 件 触 发 results 事 件 时 ， 我们 将 会 调用 父 上 下 文中 的 
updateResults( ) PAA. 











我 们 在 ecomponent 的 配置 当中 简要 地 用 "1oading" 和 "results" 字 符 串 指定 事件 的 名 称 。 在 
这 个 例子 中 ， 每 个 事件 都 会 有 一 个 对 应 的 EventEmitter 作 为 控制 器 类 的 实例 变量 。 稍 后 就 会 实 
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现 它们 。 


目前 ， 要 记 住 ecomponent 就 像 是 组 件 的 公共 API， 所 以 这 里 只 需要 指定 事件 的 名 称 ， 稍 后 再 
来 看 EventEmitter 的 具体 实现 。 





2. 定义 SearchBox 的 template 
我 们 的 template 很 简明 。 这 里 只 有 一 个 input 标签 。 


code/http/app/ts/components/YouTubeSearchComponent.ts 


/** 
* SearchBox displays the search box and emits events based on the results 


*/ 


@Component( { 
outputs: ['loading', 'results'], 
selector: 'search-box', 
template: ~ 
<input type="text" class-"form-control" placeholder-"Search" autofocus> 


}) 





3. 定义 SearchBox 控 制 器 


SearchBox 控 制 絮 是 一 个 新 类 。 





code/http/app/ts/components/YouTubeSearchComponent.ts 


export class SearchBox implements OnInit { 
loading: EventEmitter<boolean> = new EventEmitter<boolean>(); 
results: EventEmitter<SearchResult[]> = new EventEmitter<SearchResult[]>(); 


我 们 通过 implements OnInit 让 这 个 类 实现 对 应 的 接口 ， 这 么 做 是 因为 需要 使 用 生命 周期 中 
ngOnInit 的 回调 。 如 果 一 个 pus de 那么 ee 
调用 。 

ngonInit 是 进行 初始 化 工作 的 理想 地 方 ( 相对 于 constructor )， 因 为 组 件 的 各 个 输入 参数 
在 constructor 中 仍然 是 不 可 用 的 。 


e 定义 SearchBox 控 制 器 的 constructor 


我 们 来 看 一 下 SearchBox 的 constructor o 











code/http/app/ts/components/YouTubeSearch Component.ts 


constructor(private youtube: YouTubeService, 
private el: ElementRef) { 
j 


我 们 在 constructor 中 注入 : 


(1) YouTubeService 
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(2) 此 组 件 所 附着 的 元 素 el 
其 中 的 el 是 一 个 ElementRef 类 型 的 对 象 ， 此 类 型 是 Angular 对 原生 元 素 的 一 个 包装 。 
我 们 将 注入 的 两 个 值 作为 实例 变量 。 


e 定义 SearchBox 控 制 器 ngOnInit 


























在 输入 框 中 ,我们 想 要 监视 kreyup 事 件 。 问 题 是 ， 如 果 在 每 一 次 keyup 后 都 直接 进行 搜索 ， 
可 能 效果 并 不 好 。 我 们 可 以 用 三 种 方式 来 提升 用 户 体验 : 


(1) 过 滤 掉 空白 与 过 短 的 查询 ; 


(2) 消除 输入 的 “ 拌 动 ”"， 也 就 是 我 们 不 希望 每 一 个 字符 发 生 改 变 时 都 进行 搜索 ， 而 是 在 用 户 
完成 输入 并 暂停 一 小 段 时 间 后 再 进行 搜索 ; 


(3) 当 用 户 进行 新 的 搜索 时 ， 抛 弃 旧 的 搜索 内 容 。 

我 们 可 以 手动 绑 定 keyup ， 并 在 每 次 keyup 事 件 触发 时 调用 一 个 函数 ， 然 后 在 其 中 实现 字符 
过 渡 与 拌 动 消除 。 不 过 我 们 有 一 种 更 好 的 方式 让 keyup 事 件 成 为 一 个 可 观察 流 。 

RxJS 提 供 了 一 种 使 用 Rx . Observable. fromEvent 的 方式 来 监听 一 个 元 素 上 的 事件 。 我 们 可 以 
像 下 面 这 样 使 用 它 。 














code/http/app/ts/components/YouTubeSearchComponent.ts 
ngOnInit(): void { 
// convert the ~keyup~ event into an observable stream 
Observable. fromEvent(this.el.nativeElement, 'keyup') 


要 注意 在 fromEvent 里 面 : 





口 第 一 个 参数 是 this .el.nativeElement (组 件 附着 的 原生 DOM 元 素 ); 
a 第 二 个 参数 是 字符 串 'keyup' ， 代 表 的 是 将 要 被 转换 成 流 的 事件 名 称 。 
借助 流 的 魔力 ， 我 们 可 以 把 它 转换 成 SearchResult。 下 面 来 分 步 看 看 。 


有 了 keyup 事 件 的 流 ， 就 能 把 多 个 方法 串联 起 来 。 接 下 来 我 们 会 在 流 上 串联 一 些 转换 流 的 函 
数 ， 并 在 最 后 展示 整个 示例 。 


首先 ， 我 们 要 从 input 标 签 中 提取 输入 值 : 


.map((e: any) => e.target.value) // extract the value of the input 


















































上 面 的 代码 表示 ， 上 映射 每 一 个 keyup 事 件 ， 然 后 找到 它 的 目标 (e.target ， 也 就 是 input 元 
素 ) 并 取出 value。 这 意味 着 这 个 流 现在 变 成 了 一 个 字符 串 流 。 
下 一 步 : 


.filter((text: string) => text.length > 1) 


6.4 编写 YouTubeSearchComponent 143 








filter 表 示 该 流 在 长 度 小 于 1 的 时 候 不 会 发 送 任何 搜索 字符 串 。 如 果 你 还 希望 忽略 较 短 的 搜 
索 字 符 串 ， 可 以 把 这 个 值 改 大 一 点 。 


. debounceTime(250) 


debounceTime 表 示 我 们 会 忽略 触发 间隔 小 于 250 ms 的 请 求 。 也 就 是 说 , 我 们 不 会 去 搜索 每 一 
次 键入 的 内 容 。 只 有 在 用 户 和 暂停 输入 一 小 段 时 间 后 才 会 触发 搜索 。 

.do(() => this.loading.next(true) ) // enable loading 

在 流 上 使 用 do 方法 可 以 在 流 中 对 每 个 事件 执行 函数 ,但 是 这 种 方式 不 会 改变 流 中 的 任何 数 
据 。 这 是 因为 已 经 获取 到 了 具有 足够 长 度 并 消除 了 输入 拌 动 的 搜索 字符 串 , 所 以 要 在 页 面 上 显示 
loading. 

this.loading 是 一 个 EventEmitter。 我 们 通过 发 射 true 作 为 下 一 个 事件 来 “开启 ”loading。 
我 们 通过 调用 next 来 在 EventEmitter 上 发 射 数据 。 编写 的 this . loading.next(true) 代表 在 
loading 这 个 EventEmitter 上 发 射 一 个 true 事 件 。 当 监听 此 组 件 上 的 loading 事 件 时 ，$event 的 
值 现 在 会 被 设置 为 true ( 稍 后 会 深入 探讨 使 用 $event )。 


.map((query: string) => this.youtube.search(query)) 
.switch() 


在 每 一 个 触发 的 查询 上 使 用 .map 以 执行 搜索 。 使 用 switch 表 示 “ 除 了 最 近 的 一 次 ， 忽 略 所 
有 搜索 事件 ”。 这 就 是 说 ,如 果 有 一 个 新 的 搜索 进来 , 我 们 就 使 用 这 个 最 新 的 并 丢弃 掉 其 他 搜索 。 










































































e» 熟悉 Reactive 的 专家 对 此 一 定 不 会 陌生 。 你 也 可 以 在 RxJS 的 文档 "中 找到 关于 
switch 方 法 的 更 加 具体 的 定义 。 





每 当 进 入 query 时 ， 都 将 对 YouTubeService 进 行 一 次 搜索 (search )。 
把 这 些 串联 在 一 起 ， 结 果 如 下 所 示 。 


code/http/app/ts/components/YouTubeSearchComponent.ts 











ngOnInit(): void { 
// convert the ~keyup~ event into an observable stream 
Observable.fromEvent(this.el.nativeElement, 'keyup') 
.map((e: any) => e.target.value) // extract the value of the input 
.filter((text: string) => text.length > 1) // filter out if empty 
. debounceTime(250) // only once every 250ms 
.do(() => this.loading.next(true) ) // enable loading 
// search, discarding old events if new input comes in 
.map((query: string) => this.youtube.search(query ) ) 
.switch() 
// act on the return of the search 
.subscribe( 





(D https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/switch.md 
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因为 RxJS 的 API 数 量 众多 ， 所 以 看 起 来 会 有 些 吓人 。 尽 管 如 此 ， 我 们 使 用 简单 的 几 行 代码 就 
实现 了 一 个 极为 复杂 的 事件 处 理 流 ! 


因为 是 在 调用 YouTubeService ， 所 以 我 们 的 流 现在 是 一 个 SearchResult[] 流 了 。 这 时 可 以 
订阅 (subscribe) 这 个 流 ， 并 执行 相应 的 操作 。 


subscribe 接 收 三 个 参数 : onSuccess , onError #llonCompletion. 























code/http/app/ts/components/YouTubeSearchComponent.ts 


. subscr ibe( 

(results: SearchResult[]) => { // on sucesss 
this. loading.next( false); 
this.results.next(results) ; 

) 

(err: any) => { // on error 
console.log(err); 
this.loading.next(false); 

}, 


() => { // on completion 
this.loading.next( false); 
} 
); 
} 
第 一 个 参数 指定 了 当 流 触发 一 个 正常 事件 时 将 会 执行 的 操作 。 这 里 我 们 会 在 这 两 个 
EventEmitter 上 触发 一 个 事件 : 
(1) 调用 this. loading.next(false)， 表 示 停 止 加 载 ; 
(2) 调用 this.results.next(results) ， 会 触发 一 个 包含 结果 列表 数据 的 事件 。 
第 二 个 参数 指定 了 当 流 出 现 错误 时 将 会 执行 的 操作 。 这 里 我 们 只 设置 this. loading. 
next(false) 并 记录 下 错误 。 
第 三 个 参数 指定 了 当 流 结束 时 将 会 执行 的 操作 。 这 里 依然 会 触发 结束 加 载 的 事件 。 
4. SearchBox 组 件 的 完整 代码 
以 下 是 SearchBox 组 件 的 完整 代码 。 


























code/http/app/ts/components/YouTubeSearchComponent.ts 


/** 
* SearchBox displays the search box and emits events based on the results 
*/ 

@Component ( f 
outputs: ['loading', 'results'], 


selector: 'search-box', 
template: ^ 
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<input type="text" class-"form-control" placeholder-"Search" autofocus> 


}) 
export class SearchBox implements OnInit { 
loading: EventEmitter<boolean> = new EventEmitter<boolean>(); 
results: EventEmitter<SearchResult[]> = new EventEmitter<SearchResult[]>(); 


constructor(private youtube: YouTubeService, 
private el: ElementRef) { 


} 


ngOnInit(): void { 
// convert the ~keyup~ event into an observable stream 
Observable. fromEvent(this.el.nativeElement, 'keyup') 
-map((e: any) => e.target.value) // extract the value of the input 
.filter((text: string) => text.length » 1) // filter out if empty 
. debounceTime(250) // only once every 250ms 
.do(() => this.loading.next(true)) // enable loading 
// search, discarding old events if new input comes in 
.map((query: string) => this.youtube.search(query)) 
.switch() 
// act on the return of the search 
.subscribe( 
(results: SearchResult[]) => { // on sucesss 
this.loading.next(false); 
this.results.next(results); 








}, 

(err: any) => { // on error 
console. log(err); 
this. loading.next( false); 


Jo 
() 2» ( // on completion 
this.loading.next(false); 


6.4.4 编写 SearchResultComponent 


之 前 的 SearchBox 相 当 复 杂 。 现在 来 处 理 一 个 简单 得 多 的 组 件 : SearchResultComponent (如 
图 6-3 所 示 ), SearchResultComponent 的 作用 就 是 泻 染 一 个 SearchResult。 
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Charlie The Cat - 
Kitten Playing iPad 2 
!!! Game For Cats 
Cute Funny Clever 
Pets Bloopers 


HELLO REDDIT, Thanks for the 
support! More Charlie the Cat Videos 
- http;//youtu.be/xZHwYNrfWdO 
Check My Other Videos Kitten 
HAriem Shake ... 


Watch 





图 6-3 ”单一 搜索 结果 组 件 
这 里 没有 什么 新 东西 ， 所 以 直接 完整 地 列 出 来 。 


code/http/app/ts/components/YouTubeSearchComponent.ts 











@Component ( { 
inputs: ['result'], 
selector: 'search-result', 
template: ^ 


«div class-"col-sm-6 col-md-3"» 
«div class="thumbnail"> 
<img src-"[íresult.thumbnailUrl]]"» 
«div class="caption"> 
«h3» ( (result.title]])«/h3» 
<p>{{result.description}}</p> 
<p><a href="{{result.videoUr1}}" 
class="btn btn-default" role="button"> 
Watch«/a»«/p» 
«/div» 
«/div» 
«/div» 


}) 
export class SearchResultComponent { 


result: SearchResult; 


} 
有 以 下 几 点 需要 关注 : 
O @Component 只 有 一 个 result 输 入 参数 ， 可 以 通过 它 把 SearchResult 赋 值 给 组 件 ; 


口 template 里 有 标题 、 描 述 以 及 视频 的 缩 略 图 ， 并 通过 一 个 按钮 链接 到 视频 上 ; 
口 SearchResultComponent 在 其 实例 中 使 用 result 变 量 存储 SearchResult。 
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6.4.5 编写 YouTubeSearchComponent 

















我 们 要 实现 的 最 后 一 个 组 件 就 是 YouTubeSearchComponent。 这 个 组 件 最 终 会 将 所 有 东西 组 


1. YouTubeSearchComponent 的 @Component 


code/http/app/ts/components/YouTubeSearchComponent.ts 


@Component({ 
selector: 'youtube-search', 


@Component 注 解 很 容易 理解 . 使 用 名 为 youtube-search 的 selector。 
2. YouTubeSearchComponent 控 制 器 


在 讨论 temp1l ate 之 前 ， 需 要 先 看 一 下 YouTubeSearc hComponent Tz dil 28 o 





code/http/app/ts/components/YouTubeSearchComponent.ts 


export class YouTubeSearchComponent { 
results: SearchResult[]; 


updateResults(results: SearchResult[]): void { 
this.results - results; 
// console.log("results:", this.results); // uncomment to take a look 
j 
j 


这 个 组 件 拥有 一 个 实例 变量 : SearchResult 数 组 类 型 的 results。 


我 们 还 定义 了 一 个 函数 : updateResults。updateResults 直接 把 SearchResult[] 的 新 值 赋 
this resultss 

















results 和 updateResults 都 会 在 template 中 用 到 。 





3. YouTubeSearchComponent 的 template 
我 们 的 视图 需要 做 三 件 事 : 
(1) EMRI, ANTHEA HE 

(2) 监听 search-box 上 的 事件 ; 

(3) 显示 搜索 结果 。 

之 后 来 看 一 人 template。 构 建 基 本 结构 并 在 头 部 的 旁边 显示 表示 “正在 加 载 ”的 gif 动画 。 


tt 











code/http/app/ts/components/YouTubeSearchComponent.ts 


template: 
<div class='container '> 
«div class-"page-header"» 
<h1> YouTube Search 
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«img 
style-"float: right;" 
*ngI f="loading" 
src='${loadingGif}' /> 
«/h1» 
«/div» 


O EE, imgfjsre/É l A${loadingGif}, loadingGif X © E TA HOY 
require 语 句 。 这 里 使 用 了 webpack 的 图 像 文件 加 载 功 能 。 如 果 你 想 探 完 其 工作 
原理 ， 可 以 看 一 下 本 章 示例 代码 中 的 webpack 配 置 ， 或 者 下 载 image-webpack- 
loader 项 目 "。 





因为 只 有 当 loading 为 真 时 ， 才 需要 显示 加 载 图 像 ， 所 以 要 用 ngIf 来 实现 这 个 功能 。 
接 下 来 ， 看 看 使 用 search-box 的 地 方 。 


code/http/app/ts/components/YouTubeSearchComponent.ts 








«div class="row"> 
«div class-"input-group input-group-lg col-md-12"> 
«search-box 
(loading)="loading = $event" 
(results )="updateResults($event)" 
»«/search-box» 
«/div» 


值得 关注 的 是 将 results 输 出 结果 绑 定 到 1loading 的 方式 。 注 意 我 们 在 这 里 使 用 了 
(output )="action()" 语 法 。 














对 于 loading 输 出 ， 运 行 1oading = $event 表 达 式 。$event 会 被 EventEmitter 发 出 的 事件 
值 过 换 掉 。 也 就 是 说 ， 当 我 们 调用 SearchBox 组 件 中 的 tnis loading next(true)Itt, Sevent ff 
值 将 会 是 true。 

同样 ， 对 于 results 输 出 ， 每 当 一 组 新 的 结果 发 出 时 ， 都 会 调用 updateResults( ) 函数 。 这 
样 就 能 实现 更 新 组 件 中 results 实 例 变量 值 的 效果 。 

最 后 ， 我 们 要 在 组 件 中 获取 results 列 表 ， 并 为 每 个 组 件 泻 染 一 个 search-result。 












































code/http/app/ts/components/YouTubeSearchComponent.ts 


«div class="row"> 
«search-result 
*xngFor-"let result of results" 
[result]-"result"» 
«/search-result» 
«/div» 
«/div» 





(D https://github.com/tcoopman/image-webpack-loader 
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4. YouTubeSearchComponent 的 完整 代码 





M 


这 里 是 YouTubeSearchComponent 的 完整 代码 。 














code/http/app/ts/components/YouTubeSearchComponent.ts 


@Component ( f 
selector: 'youtube-search', 
template: ^ 
«div classz'container'» 
«div class-z"page-header"» 
«hi1»YouTube Search 
«img 
style-"float: right;" 
«ngI f="loading" 
src='${loadingGif}' /> 
«/h1» 
«/div» 





«div class="row"> 
«div class-"input-group input-group-1lg col-md-12"» 
«search-box 
(loading)="loading = $event" 
(results )="updateResults($event)" 
»«/search-box» 
«/div» 
«/div» 


«div class="row"> 
«search-result 
*ngFor="let result of results" 
[result]-"result"» 
«/search-result» 
«/div» 
«/div» 
}) 
export class YouTubeSearchComponent { 
results: SearchResult[]; 


updateResults(results: SearchResult[]): void { 
this.results - results; 


// console.log("results:", this.results); // uncomment to take a look 


j 
} 


好 了 ! 这 样 我 们 就 实现 了 一 个 针对 YouTube 视 频 的 随 敲 随 搜 功能 ! 如 有 果 你 还 不 太 明白 ， 可 以 
尝试 执行 示例 代码 。 
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6.5 @angular/http API 























当然 , 到 目前 为 止 发 起 的 所 有 HTTP 请 求 都 是 简单 的 6ET 请 求 。 知晓 如 何 发 起 其 他 类 型 的 请 求 


也 很 重要 。 


6.5.1 发 起 一 个 POST 请 求 


使 用 @angular/http 发 起 POST 请 求 与 发 起 GET 请 求 非常 类 似 ， 仅仅 多 了 一 个 额外 的 参数 : 请 


求 体 。 
jsonplaceholder API" 同 样 提供 了 一 个 URL， 可 供 测 试 PosT 请 求 。 现 在 就 来 试 一 下 。 








code/http/app/ts/components/MoreHTT PRequests.ts 


makePost(): void { 
this.loading = true; 
this. http.post( 
'http://jsonplaceholder.typicode.com/posts', 
JSON. stringi fy({ 


body: 'bar', 
title: 'foo', 
userId: 1 


})) 

.subscribe((res: Response) => { 
this.data = res. json(); 
this.loading = false; 

D; 

j 


在 第 二 个 参数 中 ,使 用 JSON.stringify 将 Object 转换 为 一 个 JSON 字 符 串 。 





6.5.2 PUT/PATCH/DELETE/HEAD 
还 有 其 他 一 些 常见 的 HTTP 请 求 ， 也 是 用 类 似 的 方式 进行 调用 。 























体 。 











体 )。 
下 面 展示 了 如 何 发 起 一 个 DELETE 请 求 。 


code/http/app/ts/components/MoreHTTPRequests.ts 


makeDelete(): void { 
this.loading = true; 





(D http://jsonplaceholder.typicode.com 


O http.put 和 http.patch 分 别 用 于 PUT 和 PATCH 请 求 ， 并 且 它 们 都 带 有 一 个 URL 和 一 个 请 求 





O http.delete 和 http.head 分 别 用 于 DELETE 和 HEAD 请 求 ， 并且 都 带 有 一 个 URL (没有 请 求 
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this.http.delete('http://jsonplaceholder.typicode.com/posts/1') 
.subscribe((res: Response) => { 
this.data - res.json(); 
this.loading - false; 


T) 


6.5.3 RequestOptions 


目前 我 们 覆盖 到 的 所 有 http 方 法 还 带 有 一 个 可 选 的 末 位 参数 : RequestOptions, Request 
Options 对 象 封 装 了 : 


Q method 
口 headers 
QO) body 

C) mode 





OU credentials 
DQ cache 
OQ url 


ü search 
比如 ， 我 们 可 以 用 X-API-TOKEN 这 样 一 个 特殊 的 请 求 头 来 创建 GET 请求 。 


code/http/app/ts/components/MoreHTTPRequests.ts 








makeHeaders(): void { 
let headers: Headers = new Headers(); 
headers .append('X-API-TOKEN', 'ng-book') 


let opts: RequestOptions = new RequestOptions(); 
opts.headers = headers; 


this. http.get('http://jsonplaceholder.typicode.com/posts/1', opts) 
.subscribe((res: Response) => { 


this.data = res. json(); 


J9; 


6.6 总 结 


@angular/http 非 常 灵活 并 且 广 泛 适 用 于 各 种 API。 


@angular/http 的 一 个 强大 特性 就 是 支持 模拟 后 台 。 这 一 点 在 测试 中 非常 有 用 。 想 了 解 更 多 
关于 测试 HTTP 的 内 容 ， 请 参见 第 15 章 。 








路 由 


























在 Web 开 发 中 ,路 由 是 指 将 应 用 划分 成 多 个 分 区 ,通常 是 按照 从 浏览 器 的 URL 衍 生出 来 的 规 
则 进行 分 割 。 

例如 , 访问 一 个 网 站 的 /路 径 时 , 我 们 有 可 能 正在 访问 该 网 站 的 home 路 由 ; 又 例如 , 访问 /about 
时 ， 我 们 想 要 泻 染 的 是 关于 页 面 ; 等 等 。 























7.1 为 什么 需要 路 由 


在 应 用 程序 中 定义 路 由 非常 有 用 ， 因 为 我 们 可 以 : 


口 将 应 用 程序 划分 为 多 个 分 区 ; 
口 维护 应 用 程序 的 状态 ; 
口 基于 茶 些 规则 保护 应 用 分 区 。 


假设 我 们 正在 开发 类 似 于 前 面 描述 的 库存 应 用 程序 。 
第 一 次 访问 该 应 用 程序 时 , 首先 看 到 的 可 能 是 搜索 表单 , 用 来 输入 搜索 关键 词 并 获得 匹配 的 
产品 列表 。 
然后 ， 单 击 某 产品 可 以 访问 该 产品 的 详细 信息 页 面 。 
因为 我 们 的 应 用 程序 是 客户 端 , 所 以 变换 “页 面 ” 并 不 一 定 要 更 改 URL。 但 是 值得 考量 的 是 ， 
如 果 为 所 有 页 面 使 用 同样 的 URL， 会 有 什么 后 果 呢 ? 
口 刷新 页 面 后 ， 无 法 保留 你 在 应 用 中 的 位 置 。 
a 不 能 为 页 面 添 加 书签 ， 方便 以 后 返回 相同 的 页 面 。 
口 无 法 与 他 人 分 享 当 前 页 面 的 URL。 
反 过 来 看 ， 使 用 路 由 能 让 我 们 定义 URL 字 符 串 ， 指 定 用 户 在 应 用 中 的 位 置 。 
在 库存 的 例子 中 ， 我 们 可 以 为 每 个 任务 定义 一 系列 不 同 的 路 由 配置 ， 如 下 所 示 。 
O 最 初 的 根 URL 可 能 是 http://our-app/。 当 访问 该 路 径 时 ， 我 们 可 能 被 重 定 问 到 home 路 由 : 
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http:/our-app/home。 
O 当 访 问 “About Us” 区 域 时 ，URL 地 址 可 能 变 为 http://our-app/about。 这 样 ， 如 果 我 们 将 
http://our-app/about 发 给 其 他 用 户 ， 他 们 会 看 到 相同 的 页 面 。 





7.2 客户 端 路 由 的 工作 原理 

也 许 你 以 前 曾经 编写 过 服务 端的 路 由 代码 (这 并 不 是 完成 本 章 的 条 件 )。 通 常 ， 在 服务 需 端 
负责 路 由 的 情况 下 ， 收 到 HTTP 请 求 后 ， 服 务 器 会 根据 收 到 的 URL 来 运行 相应 的 控制 器 。 

例如 ， 在 Express.js" 中 ， 可 以 这 样 实现 : 


var express = require('express'); 
var router = express.Router(); 





























// define the about route 
router .get('/about', function(req, res) { 
res.send('About us'); 


D); 
在 Ruby on Rails” 中 ， 可 以 这 样 实现 : 


# routes.rb 
get '/about', to: 'pagessabout' 


# PagesController.rb 
class PagesController « ActionController::Base 
def about 
render 
end 
end 


每 种 框架 的 模式 各 不 相同 ， 但 是 在 上 面 两 种 情况 中 ， 你 都 有 一 个 服务 器 。 它 接收 一 个 请 求 ， 
并 路 由 到 一 个 控制 器 。 该 控制 器 根据 路 径 和 参数 执行 特定 的 任务 。 

客户 端 路 由 在 概念 上 很 相似 , 但 是 实施 方法 不 同 。 在 客户 端 路 由 的 情况 下 , 每 次 URL 发 生变 
化 时 , 不 一 定 会 向 服务 器 发 送 请 求 。 我 们 把 Angular 应 用 叫 作 单 页 应 用 程序 ( single page app, SPA ), 
因为 服务 器 只 提供 一 个 页 面 ， 负 责 泻 染 各 种 页 面 的 是 JavaScript。 


那么 ， 如 何 才能 在 JavaScript 代 码 中 设 定 各 个 路 由 呢 ? 























7.2.1 初级 阶段 : 使 用 锚 标记 
在 初级 阶段 ， 客 户 端 路 由 使 用 了 一 个 巧妙 的 方法 : 它 不 使 用 指向 各 种 页 面 的 客户 端 URL, 而 








(D http://expressjs.com/guide/routing.html 
@ http://rubyonrails.org/ 
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是 使 用 锚 标 记 。 
可 能 你 已 经 知道 , 锚 标 记 的 传统 作用 是 直接 链接 到 所 在 网 页 的 其 他 位 置 , 并 让 浏览 器 滚动 到 
定义 该 锚 标 记 元 素 所 在 的 位 置 。 例 如 ， 如 果 在 HTML 页 面 中 定义 这 样 的 锚 标 记 : 


<!-- ... lots of page content here ... --» 
«a name="about"><h1>About</h1> </a> 


当 访 问 http:/something/ffabout 这 个 URL 时 ， 浏 览 器 将 直接 跳 到 这 个 定义 about 锚 标记 的 H1 标 签 。 
SPA 应 用 客户 端 框架 使 用 的 方式 是 : 将 锚 标 记 作为 路 径 来 格式 化 ， 用 它们 代表 应 用 程序 的 
路 由 o 


例如 ，SPA 应 用 的 about 路 由 可 能 是 http://something/#/about。 这 就 是 所 谓 的 基于 锚 点 标记 的 
路 由 ( hash-based routing )。 

这 个 方法 巧妙 的 地 方 在 于 ， 它 看 起 来 像 一 个 “普通 ”的 URL， 因 为 它 以 锚 标 记 和 和 斜 杜 开头 
( /about ); 
























































| 


7.2.2 进化 : HTML5 客户 端 路 由 

随 着 HTML5 的 引入 ,浏览 器 获得 了 新 的 能 力 : 在 不 需要 新 请 求 的 情况 下 ， 人 允许 在 代码 中 创 
建新 的 浏览 器 记录 项 并 显示 适当 的 URL。 

这 是 利用 history .pushstate 方 法 来 实现 的 ， 该 方法 允许 JavaSceript 控 制 浏览 器 的 导航 历史 。 


因此 ， 现 代 框 架 可 以 不 依赖 锚 标 记 方 法 来 进行 路 由 导航 ， 而 是 依赖 pushstate 在 无 需 重 新 加 
载 的 情况 下 控制 浏览 器 历史 。 





























AngularJS 注 意 事 项 : AngularJS 应 用 已 经 可 以 使 用 这 种 路 由 方法 了 ， 但 是 需要 
使 用 $locationProvider .htm15Mode(true) 来 特别 启用 。 




















在 Angular 中 , HTML5 路 由 是 默认 的 模式 。 在 本 章 后 面 , 我 们 将 讲解 如 何 从 HTML5 模 式 退 回 
到 老 的 错 标 记 模 式 。 





使 用 HTML5 路 由 模式 的 时 候 ， 需 要 注意 以 下 两 点 。 

(1) 并 非 所 有 的 浏览 器 都 支持 HTML5 路 由 模式 ， 所 以 如 果 需 要 支持 老 版 浏览 器 ， 
你 可 能 会 被 迫使 用 基于 锚 点 标记 的 路 由 模式 。 

(2) 服务 器 必须 支持 基于 HTML5 的 路 由 。 

为 什么 服务 器 必须 要 支持 基于 HTML5 路 由 ? 我 们 将 在 后 面 深入 讨论 。 
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7.3 编写 第 一 个 路 由 配置 


Angular 文 档 建议 使 用 HTML5 路 由 模式 "， 但 是 鉴于 上 一 节 提 到 的 种 种 挑战 我 
们 会 在 例子 中 使 用 基于 锚 点 标记 的 路 由 模式 进行 简化 。 
在 Angular 中 ， 我 们 通过 将 路 径 映 射 到 处 理 它们 的 组 件 来 配置 路 由 。 
我 们 来 创建 一 个 有 多 种 路 由 的 小 型 应 用 程序 。 在 这 个 例子 应 用 程序 中 ， 我 们 将 有 三 种 路 由 : 


口 主页 ， 使 用 / 鸭 home 路 径 ; 
a 关于 页 面 ， 使 用 /zyabout 路 径 ; 
a 联系 我 们 页 面 ， 使 用 /和 contact 路 径 ; 


最 后 ， 当 用 户 访问 根 路 径 CH) 时 ， 重 定向 到 主页 路 径 。 
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我 们 使 用 三 种 主要 部 件 来 配置 Angular 路 由 。 

O Routes: 描述 了 应 用 程序 支持 的 路 由 配置 。 

D RouterOutlet: 这 是 一 个 “ 占 位 符 ” 组 件 ， 用 于 告诉 Angular 要 把 每 个 路 由 的 内 容 放 在 
哪里 。 

口 RouterLink 指 令 : 用 于 创建 各 种 路 由 链接 。 


让 我 们 来 进一步 讨论 它们 。 









































7.41 导入 
为 了 使 用 Angular 的 路 由 器 ， 首 先 从 eangular/router 库 中 导入 一 些 常 量 。 


code/routes/basic/app/ts/app.ts 


import { 
RouterModule, 
Routes 
} from '@angular/router'; 


现在 ,我 们 可 以 开始 定义 路 由 带 配 置 了 。 





7.4.2 ”路 由 配置 
为 了 定义 应 用 的 路 由 配置 ， 首 先 创 建 一 个 Routes 配 置 ， 然 后 使 用 RouterModule. forRoot 









































(D https://angular.io/docs/ts/latest/guide/router.html#!#browser-url-styles 
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(routes) 来 为 应 用 程序 提供 使 用 路 由 器 必需 的 依赖 。 


code/routes/basic/app/ts/app.ts 





const routes: Routes = [ 
{ path: '', redirectTo: 'home', pathMatch: 'full' }, 
{ path: 'home', component: HomeComponent }, 
{ path: 'about', component: AboutComponent }, 
{ path: 'contact', component: ContactComponent }, 
{ path: 'contactus', redirectTo: 'contact' }, 


| 
注意 关于 路 由 配置 的 以 下 事项 。 
O path: 指定 了 该 路 由 要 处 理 的 URL 路 径 。 
C] component: 用 于 连接 当前 路 由 路 径 与 处 理 该 路 由 的 组 件 。 
O redirectTo: 一 个 可 选 选项 ， 用 于 将 当前 路 径 重 定向 到 另 一 个 已 知 路 由 。 
综 上 所 述 ， 路 由 配置 的 目的 是 指定 组 件 要 处 理 的 路 径 。 
重 定向 
在 路 由 定义 中 使 用 redirectTo 是 在 告诉 路 由 器 ， 在 访问 该 路 由 的 path 时 ， 我 们 想 让 浏览 需 
重 定向 到 另 一 个 路 由 。 
在 上 面 的 示例 代码 中 ， 如 果 访 问 http://localhost:8080 了 #/ 根 路 径 ， 我 们 将 被 重 定向 到 home 路 由 。 
另 一 个 例子 是 contactus 路 由 。 




























































































code/routes/basic/app/ts/app.ts 
{ path: 'contactus', redirectTo: 'contact' }, 
CEP ALR, ne ihttp:/localhost:8080/Z/contactusix URL, AS Awl V Ae 8 XE [0] Bl) 


/contact. 


o 示例 代码 本 节 例 子 的 完整 代码 可 以 在 示例 代码 中 的 routes/basic 目 录 中 找到 。 
查阅 README.md 文 件 ， 了 解构 建 和 运行 本 例 的 步骤 。 
路 由 需要 多 种 导入 声明 ， 我 们 在 下 面 的 例子 中 不 会 逐一 列 出 全 部 的 导入 声明 。 
但 是 ， 我 们 为 每 个 例子 列 出 了 源 文件 的 文件 名 和 行 号 。 如 果 你 遇 到 不 知道 如 何 
导入 某 些 类 的 问题 ， 请 使 用 编辑 器 打开 代码 文件 并 查看 完整 代码 。 
在 阅读 本 节 的 同时 ， 党 试 运行 代码 并 随意 发 挥 可 以 获得 更 加 深刻 的 认识 。 


7.4.3 安装 路 由 配置 


现在 有 了 路 由 配置 routes ， 我 们 需要 安装 它 。 为 了 在 应 用 中 使 用 路 由 配置 ， 首 先 要 对 
NgModule 进 行 两 项 修改 : 
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(1) 5 ARouterModule; 
(2) 在 NgModule 中 的 imports 数 组 里 使 用 RouterModule . forRoot (routes) 来 安装 路 由 配置 。 
下 面 是 为 本 应 用 在 NgModule 中 配置 的 路 由 。 


code/routes/basic/app/ts/app.ts 





























const routes: Routes = [ 
{ path: '', redirectTo: 'home', pathMatch: 'full' }, 
{ path: 'home', component: HomeComponent }, 
{ path: 'about', component: AboutComponent }, 
{ path: 'contact', component: ContactComponent }, 
{ path: 'contactus', redirectTo: 'contact' }, 


l; 


@NgModule({ 
declarations: [ 
RoutesDemoApp, 
HomeComponent , 
AboutComponent, 
ContactComponent 





ly 
imports: [ 

BrowserModule, 

RouterModule. forRoot(routes) // «-- routes 
], 
bootstrap: [ RoutesDemoApp ], 
providers: [ 

{ provide: LocationStrategy, useClass: HashLocationStrategy } 
] 


}) 
class RoutesDemoAppModule [] 





platformBrowserDynamic().bootstrapModule(RoutesDemoAppModule) 
.catch((err: any) => console.error(err)); 


7.4.4 fbHi«router-outlet» JAA RouterOutlet 指令 


当 路 由 发 生变 化 时 ， 我 们 希望 保留 外 部 “布局 ”模板 ， 只 用 路 由 的 组 件 替 换 页 面 的 “内 部 ”。 
为 了 指定 Angular 在 页 面 的 什么 地 方 泻 染 各 种 路 由 的 内 容 ， 我 们 使 用 Routerout1let 指 令 。 
组 件 的 模板 中 指定 了 一 些 div 结 构 、 导 航 部 分 和 一 个 名 为 router-outlet 的 指令 。 
router-out1let 元 素 标 示 了 各 个 路 由 组 件 的 内 容 应 该 在 哪里 被 泻 染 。 





我 们 可 以 在 模板 中 使 用 router-outlet 指 令 ， 因 为 已 经 在 NgModule 中 导入 了 


RouterModule, 
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下 面 是 应 用 中 用 于 承载 导航 的 组 件 及 其 模板 。 


code/routes/basic/app/ts/app.ts 





@Component ( { 
selector: 'router-app', 
template: ^ 
«div» 
«nav» 
<a>Navigation: </a> 
<ul> 
<li><a [routerLink]="['home']">Home</a></li> 
<li><a [routerLink]="['about']">About</a></1li> 
<li><a [routerLink]="['contact']">Contact Us«/a»«/li» 
</ul> 
</nav> 


«router-outlet»«/router-outlet» 
«/div» 


}) 


class RoutesDemoApp { 


} 


仔细 查看 上 面 模板 的 AA, 你 将 发 现 router-outlet 元 素 在 导航 目录 的 正 下 方 。 当 访问 /home 
时 ， 这 里 便 是 HomeCcomponent 模 板 被 浑 染 的 地 方 。 其 他 组 件 的 泻 染 位 置 也 是 一 样 的 。 








7.4.5 使 用 [routerLink] 调用 routerLink 指令 
我 们 现在 知道 路 由 组 件 的 模板 将 在 哪里 被 泻 染 ， 那 么 如 何 才能 让 Angular 导 航 到 一 个 指定 路 


由 呢 ? 











我 们 可 以 尝试 使 用 纯 HTML ， 像 这 样 直 接 链 接 到 路 


«a href="/#/home">Home</a> 


但 是 如 果 这 样 做 ， 点 击 这 个 链接 将 触发 页 面 重 载 ， 而 这 是 开发 单 页 应 用 时 要 杜绝 的 。 
要 解决 这 个 问题 ，Angular 提 供 了 一 个 方案 ， 可 以 在 不 重 载 页 面 的 情况 下 链接 路 由 : 使 用 



























































routerLink 指 令 。 





该 指令 允许 你 使 用 特殊 的 语法 写 链接 。 


code/routes/basic/app/ts/app.ts 


<a>Navigation: </a> 
<ul> 

<li><a [routerLink]="['home']">Home</a></li> 

<li><a [routerLink]="['about']">About</a></1li> 

<li><a [routerLink]="['contact']">Contact Us«/a»«/li» 
</ul> 
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我 们 可 以 在 左手 边 看 到 [routerLink] ， 它 将 该 指令 用 于 当前 元 素 (ay 标签 )。 




















在 右手 边 是 一 组 数组 ， 它 的 第 一 个 元 素 是 路 由 的 路 径 ， 比 如 "['home'] "BK "['about']" 





用 来 指定 点 击 该 元 素 时 应 该 导航 到 哪个 路 由 。 














行 更 加 详尽 的 讲解 。 
我 们 暂时 只 使 用 来 自 于 根 应 用 组 件 的 路 





名 字 。 





HL 








7.5 整合 





现在 有 了 所 有 的 基本 部 件 ， 可 以 来 整合 它们 ， 实 现 路 由 导航 了 。 
我 们 需要 修改 的 第 一 个 文件 是 应 用 程序 的 index.html。 
下 面 是 该 文件 的 完整 代码 。 

















code/routes/basic/app/index.html 


<!doctype html» 
<html> 
<head> 
<base href="/"> 
«title»ng-book 2: Angular Router</title> 


{% for (var css in o.htmlWebpackPlugin.files.css) { %} 
<link href="{%=o.htmlWebpackPlugin. files.css[css] Xj" rel="stylesheet"> 

{% } %} 

</head> 

<body> 
«router-app»«/router-app» 
«script srcz"/core.js"»«/script» 
«script srcz"/vendor.js"»«/script» 
«script src="/bundle. js"»«/script» 

«/body» 

«/html» 


Bg a 的 部 分 来 自 于 webpack 模 块 捆绑 器 "。 我 们 在 本 章 中 使 
用 了 webpack， 它 是 一 个 帮 你 捆绑 资源 的 工具 。 


你 可 能 很 熟悉 这 些 代码 ， 但 是 下 面 这 行 除外 : 


<base href="/"> 





(D https://webpack.github.io/ 


routerLink 的 值 是 一 串 包 含 了 一 组 字符 串 数 组 ( 例如" ['home']" ) 的 字符 串 ， 看 起 来 可 能 
比较 奇怪 。 这 是 因为 在 链接 路 由 时 ， 你 可 以 提供 更 多 信息 。 我 们 将 在 介绍 子路 由 和 路 由 参数 时 进 
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这 行 声明 了 HTML 标 签 base。 传 统 上 ,该 标签 的 作用 是 使 用 相对 路 径 来 告知 浏览 器 去 哪里 查 
找 图 片 和 其 他 资源 。 


Angular 的 路 由 器 也 依赖 这 个 标签 来 确定 如 何 构建 它 的 路 由 信息 。 


例如 ， 如 果 一 个 路 由 的 路 径 为 /hello ，base 元 素 声 明 是 href="/app" ， 那 么 应 用 程序 将 使 用 
/app/pello 作 为 实际 路 径 。 


有 了 时候，Angular 应 用 开发 者 对 应 用 中 HTML 的 head 部 分 没有 访问 权 。 比 如 在 重用 已 有 大 型 
应 用 的 页 头 和 页 脚 时 。 


孝 运 的 是 ,我 们 有 方法 处 理 这 种 情况 。 你 可 以 在 配置 NgModule 时 , 像 这 样 使 用 APP_BASE_HREF 
提供 者 ， 用 代码 来 声明 应 用 程序 的 基准 路 径 : 


@NgModule( { 
declarations: [ RoutesDemoApp ], 
imports: [ 
BrowserModule, 
RouterModule. forRoot(routes) // «-- routes 
], 
bootstrap: [ RoutesDemoApp ], 
providers: [ 
{ provide: LocationStrategy, useClass: HashLocationStrategy }, 
{ provide: APP BASE HREF, useValue: '/' } // «--- this right here 
] 
}) 


将 { provide: APP_BASE_HREF, useValue: '/' } 放 到 providers 中 ， 等 同 于 在 应 用 的 HTML 
页 头 里 使 用 cbase href="/">. 












































7.5.1 创建 组 件 
在 处 理 主 应 用 组 件 之 前 ， 首 先 创 建 三 个 简单 的 组 件 ， 每 种 路 由 各 一 个 。 


1. HomeComponent 





HomeComponent 只 有 一 个 ht 标签 ， 显示 Welcome!。 下 面 是 HomeComponent 的 完整 代码 。 


code/routes/basic/app/ts/components/HomeComponent.ts 
/* 

x Angular 

*/ 


import {Component} from 'Gangular/core'; 


@Component ( { 

selector: 'home', 

template: ^«h1»Welcome!«/h1»^ 
}) 
export class HomeComponent { 


} 
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2. AboutComponent 
同样 ，AboutComponent 也 只 有 一 个 基本 的 ht 。 


code/routes/basic/app/ts/components/AboutComponent.ts 
/* 


x Angular 
*/ 


import {Component} from '@angular/core'; 


@Component ( f 
selector: 'about', 
template: ^«h1»About«/h1»^ 
}) 
export class AboutComponent { 


} 


3. ContactComponent 





AboutComponent 也 是 一 样 。 





code/routes/basic/app/ts/components/ContactComponent.ts 
/* 


* Angular 
*/ 


import {Component} from '@angular/core'; 


@Component ( f 

selector: 'contact', 

template: ^«hi»Contact Us«/h1»^ 
}) 


export class ContactComponent { 


} 
这 些 组 件 并 没有 什么 特别 之 处 ， 所 以 让 我 们 开始 探讨 主 app.ts 文 件 。 


7.5.2 ”应 用 程序 组 件 


现在 我 们 需要 创建 一 个 根 级 “应 用 程序 ”组 件 ， 将 所 有 的 部 件 组 装 起 来 。 
我 们 先 从 core 和 router 库 导入 需要 的 模块 。 


code/routes/basic/app/ts/app.ts 
/* 


* Angular Imports 
*/ 
import { 
NgModule, 
Component 
} from 'Gangular/core'; 
import {BrowserModule} from 'Gangular/platform-browser'; 





162 第 7 章 路 由 





import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; 
import { 
RouterModule, 
Routes 
} from 'Gangular/router'; 
import {LocationStrategy, HashLocationStrategy} from '@angular/common' ; 


接 下 来 ， 导 入 上 面 创 建 的 三 个 组 件 。 


code/routes/basic/app/ts/app.ts 








import {HomeComponent} from 'components/HomeComponent' ; 
import {AboutComponent} from 'components/AboutComponent' ; 
import {ContactComponent} from 'components/ContactComponent' ; 


现在 ， 让 我 们 真正 深入 到 组 件 代码 之 中 。 首 先 声 明 组 件 选择 器 和 模板 。 


code/routes/basic/app/ts/app.ts 


@Component ( { 
selector: 'router-app', 


template: ^ 
«div» 
«nav» 
«a»Navigation:«/a» 
«ul» 
<li><a [routerLink]="['home']">Home</a></1li> 
<li><a [routerLink]="['about']">About</a></1li> 
<li><a [routerLink]="['contact']">Contact Us«/a»«/li» 
</ul> 
</nav> 
«router-outlet»«/router-outlet» 





«/div» 


}) 


class RoutesDemoApp { 


} 

我 们 将 为 这 个 组 件 使 用 两 个 路 由 指令 : Routeroutlet 和 RouterLink。 这 两 个 指令 和 其 他 公 
共 路 由 指令 一 起 ， 在 我 们 将 RouterModule 放 置 到 NgModule 的 imports 数 组 中 时 被 导入 进来 。 

作为 回顾 ，Routeroutlet 指 令 指 定 了 路 由 内 容 在 模板 中 被 泻 染 的 位 置 ， 即 模板 代码 中 
«router-outlet»«/router-outlet» AY fi, Es 

RouterLink 指 令 创 建 指向 路 由 的 导航 链接 。 















































code/routes/basic/app/ts/app.ts 


<a>Navigation: </a> 
<ul> 

<li><a [routerLink]="['home']">Home</a></li> 

<li><a [routerLink]="['about']">About</a></1li> 

<li><a [routerLink]="['contact']">Contact Us«/a»«/li» 
</ul> 
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使 用 [routerLink] 将 指示 Angular 获 取 click 事 件 的 所 有 权 , 然后 基于 路 由 的 定义 , 初始 化 路 
由 融 并 导航 到 正确 的 位 置 。 


7.5.3 配置 路 由 
接 下 来 ， 我 们 创建 一 组 类 型 为 Routes 的 对 象 数组 ， 并 用 它 来 声明 路 由 配置 。 


code/routes/basic/app/ts/app.ts 


const routes: Routes = [ 

{ path: '', redirectTo: 'home', pathMatch: 'full' }, 
{ path: 'home', component: HomeComponent }, 

{ path: 'about', component: AboutComponent }, 

{ path: 'contact', component: ContactComponent }, 

{ path: 'contactus', redirectTo: 'contact' }, 


]; 
在 app.ts 文 件 的 最 后 ， 我 们 这 样 引导 应 用 。 


code/routes/basic/app/ts/app.ts 


@NgModule( { 
declarations: [ 
RoutesDemoApp, 
HomeComponent , 
AboutComponent , 
ContactComponent 








], 
imports: [ 
BrowserModule, 
RouterModule.forRoot(routes) // «-- routes 
Ip 
bootstrap: [ RoutesDemoApp ], 
providers: [ 
{ provide: LocationStrategy, useClass: HashLocationStrategy } 
] 
}) 
class RoutesDemoAppModule {} 





plat formBrowserDynamic( ) .bootstrapModule(RoutesDemoAppModule ) 
.catch((err: any) => console.error(err)); 


与 一 贯 的 做 法 一 样 ， 我 们 引导 应 用 并 指定 RoutesDemoApp 为 根 组 件 。 

注意 ， 我 们 将 所 有 必需 的 组 件 放 到 declarations 里 。 如 果 要 路 由 到 一 个 组 件 ， 那 么 必须 在 
某 个 NgModule( 当前 模块 或 者 导入 的 模块 ) 里 面 声明 它 。 

在 imports 中 ， 我们 有 RouterModule. forRoot(routes)。RouterModule. forRoot (routes) 


是 一 个 函数 , 接收 我 们 的 路 由 对 象 数 组 并 配置 路 由 器 , 然后 返回 依赖 列表 , 例如 RouteRegistry、 
Location 和 其 他 一 些 路 由 需 运 行 时 必需 的 类 。 


在 providers 中 ， 我 们 有 : 
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{ provide: LocationStrategy, useClass: HashLocationStrategy } 


下 面 深入 讲解 这 行 代码 的 作用 。 





7.6 ”路 由 策略 
定位 策略 ( location strategy ) 是 Angular 应 用 从 路 由 定义 进行 解析 和 创建 路 径 的 方式 。 

















o 在 AngularJS 中 ， 它 被 称 作 routing mode. 














Angular 的 默认 策略 为 PathLocationStrategy ， 也 就 是 HTML5 路 由 。 在 使 用 这 个 策略 时 ， 路 
由 的 路 径 是 常规 路 径 ， 例 如 /home 或 者 /contact。 


通过 将 LocationStrategy 类 绑 定 到 新 的 策略 类 实例 ， 我 们 可 以 改变 应 用 的 定位 策略 。 

我 们 可 以 不 使 用 默认 的 PathLocationStrategy ， 而 是 使 用 HashLocationStrategy。 

我 们 使 用 错 点 标记 策略 作为 默认 策略 ， 因 为 如 果 使 用 HTML5 路 由 ,那么 URL 将 成 为 普通 的 
路 径 ( 而 非 使 用 锚 点 标记 或 者 锚 标 签 )。 

这 样 ， 当 你 在 客户 端点 击 一 个 链接 时 ， 路 由 应 该 能 正常 工作 并 进行 导航 ， 比 如 从 /about 到 
/contact。 

如 果 刷 新 页 面 ， 我 们 向 服务 器 索要 的 就 不 是 服务 器 提供 的 根 URL ， 而 是 /about 或 者 /contact。 
因为 服务 器 端 没 有 对 应 /about 的 页 面 ， 所 以 它 会 返回 404. 

该 默认 策略 适用 于 基于 锚 点 标记 的 路 径 ， 例 如 /Whome 或 者 /#Wcontact。 服 务 融 将 它们 解析 为 / 
路 径 (这 也 是 AngularJS 的 默认 模式 )。 

















































































































如 何在 产品 中 使 用 HTMILS 模 式 呢 ? 

要 使 用 HTMLS 模 式 路 由 ， 你 必须 配置 服务 器 来 将 所 有 “不 存在 ”的 路 由 重 定向 
到 根 URL。 

在 routes/basic 项 目 中 ， 我 们 包含 了 一 个 脚本 ， 可 在 webpack-dev-server 环 境 下 开 
发 ， 并 使 用 HTML5 路 径 。 

要 使 用 它 ， 需 要 cd routes/basic 并 运行 node html5-dev-server.js。 








最 后 ， 为 了 让 示例 应 用 适合 这 个 新 的 策略 ， 必 须 首 先导 和 人 LocationStrategy 和 HashLoca- 
tionStrategy. 


code/routes/basic/app/ts/app.ts 


import {LocationStrategy, HashLocationStrategy} from '@angular/common'; 


然后 将 定位 策略 添加 到 NgModule 的 providers。 








code/routes/basic/app/ts/app.ts 


providers: [ 
] 


{ provide: LocationStrategy, useClass: HashLocationStrategy } 


你 可 以 编写 自己 的 策略 。 只 需要 扩展 LocationStrategy 类 并 实现 一 些 方法 即 


可 。 开 始 的 好 方法 是 阅读 Angular 的 HashLocationStrategy 或 者 PathLocation- 
Strategy 类 的 源 代码 。 


7.7 ”路 径 定位 策略 


在 示例 应 用 的 目录 中 ， 有 一 个 名 为 app/ts/app.html5.ts 的 文件 。 














如 果 你 想 试 试 默 认 的 PathLocationStrategy, 那么 将 这 个 文件 的 内 容 复 制 到 app/ts/app.ts 中 ， 
然后 重新 加 载 应 用 即 可 。 





78 运行 应 用 程序 


现在 ， 你 可 以 到 应 用 的 根 目录 (code/routes ) 并 运行 npm run server 来 启动 应 用 程序 。 
当 你 在 浏览 器 中 输入 http://localhost:8080/ 时 ,应 该 能 看 到 home 路 由 被 泻 染 了 (如 图 7-1 所 示 )。 


W ng-book 2: Angular 2 Rout x 


Felipe 
€ © | D localhost:8080/#/home 


Navigation: ^ Home About Contact us 


Welcome! 





图 7-1 Home% H 
注意 ， 浏 览 器 中 的 URL 被 重 定向 到 了 http://localhost:8080/#/home。 
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现在 点 击 每 个 链接 ， 就 会 泻 染 相应 的 路 由 (分 别 如 图 7-2、 图 7-3 所 示 )。 


BB ng-book 2: Angular 2Rou: x 


e C [D localhost:8080/#/about 


Navigation: ^ Home 


About 


B ng-book 2: Angular 2 Rout x 


About Contact us 


图 7-2” ”About 路 由 





= CŒ D localhost:8080/#/contact 


Navigation: Home 


Contact Us 


About Contact us 


图 7-3 Contact Us 路 由 
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7.9 ”路 由 参数 


我 们 经 常 希望 在 应 用 程序 中 导航 到 特定 的 资源 。 例如, 假设 我 们 有 一 个 新 闻 网 站 , 它 拥有 很 
多 文章 。 每 篇 文章 可 能 有 一 个 ID。 如 果 有 一 篇 ID 为 3 的 文章 ， 那 么 可 以 通过 下 面 的 URL 来 导航 到 
这 篇 文章 : 





/articles/3 
如 果 有 一 篇 人 为 4 的 文章 ， 我 们 可 以 在 这 里 访问 它 : 
/articles/4 


以 此 类 推 。 

很 显然 , 我 们 不 是 为 每 篇 文章 编写 一 个 路 由 ,而 是 使 用 一 个 变量 或 者 路 由 参数 。 我 们 可 以 像 
这 样 在 路 径 段 前 面 添 加 一 个 冒号 ， 设 定 路 由 接收 一 个 参数 : 

/route/: param 

在 示例 新 闻 站 里 ， 我 们 可 以 这 样 定义 路 由 : 

/articles/:id 


为 了 添加 参数 到 路 由 配置 ， 我 们 这 样 指定 路 由 路 径 。 























code/routes/music/app/ts/app.ts 


const routes: Routes = [ 
{ path: '', redirectTo: 'search', pathMatch: 'full' }, 
{ path: 'search', component: SearchComponent }, 

{ path: 'artists/:id', component: ArtistComponent }, 

{ path: 'tracks/:id', component: TrackComponent }, 

{ path: 'albums/:id', component: AlbumComponent }, 


] 
当 我 们 访问 路 由 /artist/123 时 ，123 部 分 是 被 传 到 路 由 的 id 路 由 参数 。 
但 是 ， 如 何 获取 特定 路 由 的 参数 呢 ? 这 正 是 使 用 路 由 参数 的 地 方 。 








ActivatedRoute 
为 了 使 用 路 由 参数 ， 我 们 首先 需要 导 人 ActivatedRoute : 


import { ActivatedRoute } from 'Gangular/router'; 


接 下 来 ， 将 ActivatedRoute 注 入 组 件 的 构造 函数 中 。 例 如 ,假设 我 们 有 一 个 这 样 定 义 的 


Routes: 





const routes: Routes - [ 
{ path: 'articles/:id', component: ArticlesComponent } 


ie 
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export class ArticleComponent { 
id: string; 


constructor(private route: ActivatedRoute) { 


route.params.subscribe(params => { this.id = params['id']; }); 


} 
} 


注意 , route.params 是 一 个 可 观察 对 象 。 我 们 可 以 使 用 .subscribe 将 参数 值 提取 到 





在 这 种 情况 下 ， 我 们 将 params[ 'id' ] 赋值 给 组 件 实例 的 变量 idq。 
现在 ， 在 访问 /articles/236 时 ， 组 件 的 id 属性 应 该 接收 236。 


7.10 ”音乐 搜索 应 用 











然后 ， 在 开发 ArticleComponent 时 ， 我 们 将 ActivatedRoute 作 为 参数 添加 到 构造 函数 : 





固定 值 。 





下 面 来 编写 一 个 更 加 复杂 的 应 用 。 我 们 将 构建 一 个 音乐 搜索 应 用 〈 如 图 7-4 所 示 )， 它 具有 以 





下 特性 : 
(1) 按照 提供 的 关键 词 搜索 曲目 ; 
(2) 在 数据 表格 中 显示 匹配 曲目 ; 
(3) 点 击 歌手 名 字 时 ， 显 示 歌 手 介绍 ; 
(4) 点 击 专辑 名 字 时 ， 显 示 专 辑 信息 和 曲目 列表 ; 
(5) 点 击 歌 曲名 字 时 ， 显 示 曲 目 信 息 并 允许 用 户 试 听 。 
这 个 应 用 需要 的 路 由 如 下 所 示 。 


O /search: 搜索 表格 和 搜索 结果 。 
O /artists/:id: 艺术 家 信息 ， 接 收 Spotify 的 ID 为 参数 。 

O /albums/:id: 专辑 信息 ， 包 含 曲 目 列表 ， 接 收 Spotify 的 ID。 
O /tracks/:id: 曲目 信息 和 试听 ， 也 接收 Spotify 的 ID。 























示例 代码 本 节 例 子 的 完整 代码 可 以 在 示例 代码 中 的 routes/music 目 录 中 找到 。 


查阅 README.md 文 件 ， 了 解构 建 和 运行 本 例 的 步骤 。 


我 们 将 使 用 Spotify APT" 来 获取 曲目 、 艺 术 家 和 专辑 的 信息 。 





(D https://developer.spotify.com/web-api 
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图 7-4 ”音乐 应 用 的 搜索 视图 


7.10.1 首要 步骤 
我 们 要 写 的 第 一 个 文件 是 app.ts。 首 先 ， 从 Angular 导 入 需要 的 类 。 

















code/routes/music/app/ts/app.ts 
/* 


x Angular Imports 
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*/ 
import { 
Component 
} from 'Gangular/core'; 
import { NgModule } from '@angular/core'; 
import { BrowserModule } from 'Gangular/platform-browser'; 
import { platformBrowserDynamic } from 'Gangular/platform-browser-dynamic'; 
import { HttpModule } from 'Gangular/http'; 
import { FormsModule } from 'Gangular/forms'; 
import { 
RouterModule, 
Routes 
} from 'Gangular/router'; 
import { 
LocationStrategy, 
HashLocationStrategy, 
APP. BASE. HREF 
} from 'Gangular/common'; 





/* 
* Components 


*/ 
现在 我 们 有 了 所 有 导入 声明 ， 接 下 来 考虑 每 个 路 由 的 组 件 。 


O Search 路 由 : 新 建 SearchComponent。 该 组 件 将 连接 Spotify API 并 执行 搜索 功能 ， 然 后 在 
数据 表格 中 显示 搜索 结果 。 
口 Artists 路 由 : 新 建 ArtistComponent ， 显 示 艺 术 家 信息 。 

口 Albums 路 由 : 新 建 AlbumComponent , 显示 专辑 的 曲目 列表 。 
口 Tracks 路 由 : 新 建 TrackComponent， 显示 曲目 并 允许 试听 。 


因为 新 组 件 需要 与 Spotify API 交 互 , 所 以 我 们 需要 创建 一 个 服务 , 它 使 用 http 模 块 来 调用 API 
服务 器 。 


应 用 的 一 切 都 依赖 这 些 数据 ， 所 以 我 们 首先 创建 SpotifyService。 

































































7.10.2 SpotifyService 


你 可 以 在 示例 代码 中 的 routes/music/app/ts/services 目 录 找 到 SpotifyService 的 
完整 代码 。 


我 们 要 实现 的 第 一 个 方法 是 searchByTrack ， 它 将 利用 提供 的 关键 词 来 搜索 曲目 。 
Spotify API 文 档 中 描述 了 API 端 点 中 有 一 个 名 为 Search endpoint 的 端点 。 





(D https://developer.spotify.com/web-api/search-item/ 
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Y 


该 端点 正 是 我 们 想 要 的 : 它 接收 一 个 查询 对 象 ( 使 用 q 参 数 ) 和 一 个 type 参 数 。 
在 这 种 情况 下 ， 查 询 对 象 是 搜索 关键 词 。 因 为 搜索 的 是 歌曲 ， 所 以 type 为 track。 
服务 的 第 一 个 版 本 可 能 如 下 所 示 : 


class SpotifyService { 
constructor(public http: Http) { 
j 









































searchByTrack(query: string) { 
let params: string - [ 
`q=${query}`, 
^type-track^ 
]-join("&"); 
let queryURL: string = ^https://api.spotify.com/v1/search?$(params]'; 
return this.http.request(queryURL).map(res => res. json()); 
j 
j 


这 上 段 代码 向 https://api.spotify.conm/v1/search 这 一 URL 执 行 HTTP GET 请 求 ,传人 query ( 搜索 关 
键 词 ) 和 硬 编 码 为 track 的 type。 


该 http 调 用 返回 一 个 Observable。 我 们 将 进一步 使 用 RxJS 函 数 map 转 换 搜索 结果 ( 一 个 http 
模块 的 Response 对 象 ) 并 将 它 解 析 为 JSJON， 最 终 获 得 一 个 对 象 。 
任何 调用 searchByQuery 的 函数 都 可 以 使 用 observable API 来 订阅 它 的 响应 : 


service 
.searchTrack('query' ) 
.subscribe((res: any) => console.log('Got object', res)) 














7.10.3 SearchComponent 


现在 我 们 有 了 执行 曲目 搜索 的 服务 ， 可 以 开始 编写 SearchComponent T - 
同样 ， 以 导入 声明 开始 。 


code/routes/music/app/ts/components/SearchComponent.ts 
/* 
x Angular 


*/ 


import (Component, OnInit} from 'Gangular/core'; 
import { 

Router, 

ActivatedRoute, 
} from 'Gangular/router'; 


/* 


* Services 
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*/ 
import {SpotifyService} from 'services/SpotifyService'; 


这 里 ， 我 们 导入 了 刚刚 新 建 的 Spoti fyService 类 和 一 些 其 他 类 。 
我 们 的 目标 是 像 卡 片 一 样 一 条 一 条 地 泻 染 曲 目 搜索 结果 ， 如 图 7-5 所 示 。 








Huckleberry Flint 
Whiskey Before Breakfast 


ABrief And True Report Concerning Huckleberry Flint 


图 7-5 音乐 应 用 的 卡片 


现在 开始 开发 组 件 。 我 们 用 search 作 为 选择 器 ,并 使 用 下 面 的 模板 。 该 模板 有 点 长 ， 因 为 我 
们 适当 添加 了 一 些 样式 ， 但 是 相 比 我 们 迄今 做 过 的 那些 ， 它 并 不 复杂 。 


code/routes/music/app/ts/components/SearchComponent.ts 


@Component ( { 
selector: 'search', 
template: ^ 
«hi»Search«/h1» 





<p> 
<input type="text" #newquery 
[value]="query" 
(keydown. enter )="submit(newquery .value)"> 
«button (click)="submit(newquery.value)">Search</button> 
</p> 
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«div xngI f="results"> 
«div «xngl f="!results.length"> 
No tracks were found with the term '{{ query }}' 


</div> 


«div «xngl f="results.length"> 
<hi>Results</h1> 


<div class="row"> 
«div class="col-sm-6 col-md-4" xngFor="let t of results"> 


«div class="thumbnail"> 
«div class="content"> 
<img src="{{ t.album.images[0].url }}" class-"img-responsive"» 
«div class="caption"> 
<h3> 
«a [routerLink]="['/artists', t.artists[0].id]"» 
{{ t.artists[0].name }} 
</a> 
«/h3» 
«br» 
«p» 
«a [routerLink]="['/tracks', t.id]"> 
{{ t.name }} 
</a> 
</p> 
</div> 
<div class="attribution"> 


<h4> 

«a [routerLink]="['/albums', t.album.id]"» 
{{ t.album.name }} 

</a> 

«/h4» 

«/div» 
«/div» 
«/div» 
«/div» 
«/div» 
«/div» 
«/div» 


}) 

1. 搜索 框 

下 面 来 分 段 分 析 HTML 模 板 。 

搜索 框 在 第 一 段 中 。 

code/routes/music/app/ts/components/SearchComponent.ts 
<p> 


<input type="text" #newquery 
[value]="query" 
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(keydown. enter )="submit(newquery.value)"> 
«button (click)="submit(newquery.value)">Search</button> 
</p> 
这 里 ， 我 们 插入 了 输入 框 ， 并 将 其 DOM 元 素 的 value 属 性 绑 定 到 组 件 的 query 属 性 。 
我 们 还 给 这 个 元 素 赋予 了 一 个 模板 变量 ， 名 为 tnewquery。 这 样 我 们 就 可 以 在 模板 中 通过 
newquery .value 来 直接 访问 该 输入 框 的 值 。 
按钮 将 触发 组 件 的 submit 方 法 ,将 输入 框 的 值 当 作 参 数 传 入 。 


我 们 还 希望 在 用 户 按 下 回 车 键 以 后 触发 submit 事 件 ， 所 以 将 keydown .enter 事 件 绑 定 到 输 
入 框 。 


2. 搜索 结果 和 链接 
接 下 来 的 部 分 显示 搜索 结果 。 我 们 依靠 ngFor 指 令 来 迭代 返回 对 象 中 的 每 条 曲目 。 


code/routes/music/app/ts/components/SearchComponent.ts 





[MI 























<div class="row"> 
«div class="col-sm-6 col-md-4" xngFor="let t of results"» 
«div class="thumbnail"> 


我 们 为 每 条 曲目 显示 其 艺术 家 的 名 字 。 


code/routes/music/app/ts/components/SearchComponent.ts 


<h3> 
«a [routerLink]="['/artists', t.artists[0].id]"» 
{{ t.artists[0].name }} 
</a> 
</h3> 


注意 我 们 是 如 何 使 用 RouterLink 指 令 来 重 定向 到 [' /artists'，t.artists[0] .id] 的 。 


这 是 为 特定 路 由 设置 路 由 参数 的 方法 。 假 设 有 一 个 id 为 abc123 的 艺术 家 ， 当 这 个 链接 被 点 击 
本 应 用 将 导航 到 /artist/abc123 ( abc123 是 :id 参数 )。 


下 面 将 展示 如 何在 该 路 由 对 应 的 组 件 中 获取 这 个 参数 。 
现在 ,我 们 这 样 显示 曲目 : 


























时 





code/routes/music/app/ts/components/SearchComponent.ts 
<p> 
«a [routerLink]="['/tracks', t.id]"> 
{{ t.name }} 
</a> 
</p> 


这 样 显示 专辑 : 
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code/routes/music/app/ts/components/SearchComponent.ts 


<h4> 
«a [routerLink]="['/albums', t.album.id]"> 
{{ t.album.name }} 
</a> 
«/h4» 


3. SearchComponent 2$ 
TEBE IPAE RZ 


code/routes/music/app/ts/components/Search Component.ts 





export class SearchComponent implements OnInit { 
query: string; 
results: Object; 


constructor(private spotify: SpotifyService, 
private router: Router, 
private route: ActivatedRoute) { 
this.route 





.queryParams 
.subscribe(params => { this.query = params['query'] || ''; }); 
j 
我 们 声明 了 两 个 属性 : 








口 query ， 用 来 处 理 当前 搜索 关键 词 ; 
口 results, 用 来 存储 搜索 结果 。 

在 构造 函数 的 参数 中 ， 我 们 注入 了 (之 前 创建 的 ) SpotifyService RouterfllActivated- 
Route, 并 将 它们 设置 为 类 属性 。 

在 构造 函数 中 ， 我 们 用 subscribe 订 阅 到 queryParams 属 性 。 通 过 它 ， 我们 可 以 访问 查询 参 
数 ， 比 如 搜索 关键 词 (params['query'] )。 


在 一 个 像 http://localhost/#/search?query=cats&order=ascending 这 样 的 URL 中 ，queryParams 以 
对 象 的 形式 为 我 们 提供 路 由 参数 。 这 就 是 说 ,我们 可 以 从 params['order'] 中 访问 order (在 本 
例 中 为 ascending )。 

另外 ， 注 意 queryParams 与 route.params 有 所 不 同 。route.params 在 路 由 配置 中 匹配 参数 ， 
而 queryParams 在 查询 字符 串 中 匹配 参数 。 

在 本 例 中 ， 如 果 没 有 query 人 参数， 那么 我 们 将 this.query 设 置 为 空 字符 串 。 

e search 方 法 


在 SearchComponent 中 , 我 们 将 调用 SpotifyService 服 务 并 演 染 搜索 结果 。 我 们 要 在 下 面 两 
种 情况 下 运行 搜索 : 
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a 当 用 户 输入 搜索 关键 词 并 提交 表单 时 ; 
口 当 用 户 使 用 带 有 查询 参数 的 URL 导 航 到 本 页 面 时 (例如 ， 用 其 他 人 共享 的 链接 或 者 收藏 
的 本 页 面 链接 )。 


为 了 在 上 面 两 种 情况 下 执行 实际 的 搜索 ， 我 们 创建 了 search 方 法 。 











code/routes/music/app/ts/components/SearchComponent.ts 


search(): void { 
console.log('this.query', this.query); 
if (!this.query) ( 
return; 


} 


this.spotify 
.searchTrack(this.query) 
.subscribe((res: any) => this.renderResults(res)); 


} 
search 了 国 数 通过 当前 this . query 属 性 的 值 来 得 知 应 该 搜索 什么 。 为 我 们 在 构造 函数 中 订 
阅 了 queryParams ， 所 以 可 以 确认 this.query 总 是 有 最 新 的 搜索 关键 词 。 
然后 ， 我 们 订阅 到 searchTrack 可 观察 对 象 。 这 样 ， 只 要 有 新 搜索 结果 到 达 ， 我 们 就 调用 


renderResults. 


























code/routes/music/app/ts/components/SearchComponent.ts 


renderResults(res: any): void { 
this.results = null; 
if (res && res.tracks && res.tracks.items) { 
this.results = res.tracks.items; 
} 
} 


我 们 声明 了 组 件 属性 results。 只 要 它 的 值 有 变化 ，Angular 就 会 自动 更 新 视图 。 

e 在 页 面 加 载 时 进行 搜索 

正如 上 面 指出 的 ， 我 们 希望 在 URL 包 含 搜索 查询 参数 时 ， 能 够 直接 自动 获取 搜索 结 

为 了 达到 这 个 目标 ， 我 们 将 实现 一 个 Angular 路 由 器 提供 的 钩子 ， 在 组 件 初始 化 的 时 候 运 














e» 这 难道 不 是 构造 函数 要 做 的 吗 ? 既 正 确 ， 也 不 正确 。 正 确 是 因为 构造 函数 是 用 

来 初始 化 变量 值 的 ， 但 是 如 果 想 要 撰写 优质 、 容 易 测 试 的 代码 ， 你 就 要 最 小 化 
对 象 构建 的 副作用 。 请 记 住 ， 你 应 该 像 下 面 这 样 ， 将 组 件 初 始 化 代码 放 到 一 个 
A) By FB 





下 面 是 ngonInit 方 法 的 代码 。 
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code/routes/music/app/ts/components/SearchComponent.ts 

ngOnInit(): void { 

this.search(); 

j 
为 了 使 用 ngonInit， 我 们 导入 OnInit 接 口 ， 并 声明 组 件 类 implements OnInit. 
正如 你 所 看 到 的 , 我 们 在 这 里 仅仅 执行 了 搜索 。 因 为 我 们 的 搜索 关键 词 来 自 于 URL， 所 以 这 

没有 问题 。 

e 提交 表单 
现在 来 看 看 在 用 户 提交 表单 的 时 候 ， 我 们 应 该 干什么 。 











code/routes/music/app/ts/components/SearchComponent.ts 
submit(query: string): void { 


this.router.navigate(['search'], { queryParams: { query: query } }) 
.then(_ => this.search() ); 
j 


我 们 手动 告诉 路 由 器 导航 到 搜索 路 由 ， 并 提供 了 query 参 数 ， 然 后 执行 搜索 功能 。 


这 样 做 为 我 们 带 来 了 很 大 的 好 处 : MRAN a, 我 们 将 会 看 到 一 样 的 搜索 结果 。 可 以 说 ， 
我 们 将 搜索 关键 词 保 存 到 URL 了 。 


e 整合 


下 面 是 SearchComponent 类 的 完整 代码 。 














code/routes/music/app/ts/components/SearchComponent.ts 
/* 
x Angular 


*/ 


import {Component, OnInit} from 'Gangular/core'; 
import { 

Router, 

ActivatedRoute, 
) from 'Gangular/router'; 


/* 
* Services 
*/ 


import {SpotifyService} from 'services/SpotifyService'; 


@Component ( f 
selector: 'search', 
template: ~ 
<hi>Search</h1> 


<p> 
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<input type="text" #newquery 
[value]="query" 
(keydown. enter )="submit(newquery.value)"> 
«button (click)="submit(newquery.value)">Search</button> 
</p> 


«div *xngI f="results"> 
«div xngI f="!results.length"> 
No tracks were found with the term '{{ query }}' 
</div> 


«div x«ngIf-"results.length"» 
«hi»Results«/h1» 


«div class="row"> 
«div class-"col-sm-6 col-md-4" xngFor="let t of results"» 
«div class="thumbnail"> 
«div class="content"> 
<img src="{{ t.album.images[0].url }}" class-"img-responsive"» 
«div class="caption"> 
<h3> 
<a [routerLink]="['/artists', t.artists[@].id]"> 
{{ t.artists[0].name }} 
</a> 
«/h3» 
«br» 
<p> 
«a [routerLink]="['/tracks', t.id]"> 
{{ t.name }} 
</a> 
</p> 
</div> 
«div class="attribution"> 
«h4» 
«a [routerLink]="['/albums', t.album.id]"» 
{{ t.album.name }} 
</a> 
«/h4» 
«/div» 
«/div» 
«/div» 
«/div» 
«/div» 
«/div» 
</div> 
}) 
export class SearchComponent implements OnInit { 
query: string; 
results: Object; 


constructor(private spotify: SpotifyService, 
private router: Router, 
private route: ActivatedRoute) { 
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this.route 
.queryParams 
.subscribe(params => { this.query = params['query'] || ''; }); 


} 


ngOnInit(): void { 
this.search(); 


} 


submit(query: string): void { 
this.router.navigate(['search'], { queryParams: { query: query } }) 
.then(_ => this.search() ); 


} 


search(): void { 
console.log('this.query', this.query); 
if (!this.query) { 
return; 


} 


this.spotify 
.searchTrack(this.query ) 
.subscribe((res: any) => this.renderResults(res)); 





} 


renderResults(res: any): void { 
this.results = null; 
if (res && res.tracks && res.tracks.items) { 
this.results = res.tracks.items; 
} 
j 
j 


7.10.4 ”尝试 搜索 
我 们 已 经 完成 了 搜索 代码 ， 现 在 来 试 一 试 ( 如 图 7-6 所 示 )。 
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Sportify musicforactive people 


Home Add 


Search 


andre de sapato novo Search 


Results 


BAND» 
Ang, CHORINHO 
Ar | 





Bando De Macambira 


Ordinarius Evandro Do Bandolim 
André do Sapato Novo André de Sapato Novo / Tico Tico no Fubá André De Sapato Novo 
Chorinho Rio de Choro 


Chorinhos De Ouro 


CLARINETES AD LIBITUM 








Pixinguinha 
André de Sapato Novo 


Clarinetes Ad Libitum 
André de Sapato Novo 


Pixinguinha 
Andre De Sapato Novo 


Benedito Lacerda E Pixinguinha Contradanza Latin Jazz Roots 





图 7-6 ”尝试 搜索 
可 以 点 击 艺 术 家 、 曲 目 或 者 专辑 链接 来 导航 到 相应 的 路 由 。 


7.10.5 TrackComponent 





我 们 用 TrackComponent 来 处 理 曲 目 路 由 。 它 显示 曲目 名 字 和 专辑 封面 图 片 ， 并 人 允许 用 户 使 
用 HTMLS 的 audio 标 签 来 进行 试听 。 





code/routes/music/app/ts/components/TrackComponent.ts 
template: 
«div *ngI f="track"> 
<ht>{{ track.name }}</h1> 
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<p> 
<img src="{{ track.album.images[1].url }}"> 
</p> 


<p> 
<audio controls src="{{ track.preview_url }}"></audio> 
</p> 


<p><a href (click)="back()">Back</a></p> 
</div> 


和 我 们 为 搜索 功能 所 做 的 一 样 ， 在 这 里 使 用 Spotify API。 让 我 们 重 构 searchTrack 方 法 ， 从 
中 提取 两 个 有 用 的 方法 ， 以 供 复 用 。 





code/routes/music/app/ts/services/SpotifyService.ts 


export class SpotifyService { 
static BASE_URL: string = 'https://api.spotify.com/v1'; 


constructor(private http: Http) { 
j 


query(URL: string, params?: Array«string»): Observable«any[]» { 
let queryURL: string = ~${SpotifyService.BASE_URL}${URL}°*; 
if (params) ( 
queryURL = ^$í(queryURL])?$(params.join('&'))'; 
j 


return this.http.request(queryURL).map((res: any) -» res.json()); 
j 


search(query: string, type: string): Observable«any[]» ( 
return this.query(^/search'^, [ 
“q=${query}~, 
“type=${type}> 
1); 
j 


现在 ， 我 们 已 经 将 这 些 方法 分 离 到 Spoti fyService。 注 意 searchTrack 方 法 变 得 简单 多 了 。 


code/routes/music/app/ts/services/SpotifyService.ts 


searchTrack(query: string): Observable<any[]> { 
return this.search(query, 'track'); 


j 
然后 创建 一 个 方法 ， 让 我 们 正在 开发 的 组 件 可 以 根据 曲目 的 id 来 获取 曲目 信息 。 


code/routes/music/app/ts/services/SpotifyService.ts 





getTrack(id: string): Observable<any[]> { 
return this.query(^/tracks/$([id)^); 
j 
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最 后 ， 在 TrackComponent 的 新 ngonInit 方 法 中 调用 getTrack。 





code/routes/music/app/ts/components/TrackComponent.ts 


ngOnInit(): void { 
this.spotify 
.getTrack(this.id) 
.subscribe((res: any) => this.renderTrack(res)); 


] 
其 他 组 件 的 工作 原理 很 相似 , 它们 都 使 用 SpotifyService 中 的 get* 方 法 来 根据 id 获取 艺术 家 
或 曲目 信息 。 





7.10.6 ”音乐 搜索 应 用 小 结 


现在 , 我 们 有 了 一 个 比较 实用 的 音乐 搜索 和 预览 应 用 ( 如 图 7-7 所 示 ) 你 可 以 试用 它 并 搜索 
一 些 喜 欢 的 音乐 ! 








It Had To Be You (Big Band and Vocals) 
When Harry ; € a 
Mel Sally... 





图 7-7 完成 路 由 之 后 


7.11 KART 

在 变换 路 由 前 , 我们 可 能 想 要 触发 一 些 行 为 。 典 型 的 例子 是 用 户 认 证 。 假 设 我 们 有 登录 路 由 
和 被 保护 的 路 由 。 

我 们 希望 只 有 在 登录 页 面 中 提供 了 正确 的 用 户 名 和 密码 的 时 候 , 才 人 允许 应 用 导航 到 被 保护 的 
路 由 。 

为 了 实现 这 个 功能 , 我 们 需要 连接 到 路 由 的 生命 周期 钩子 , 并 在 激活 被 保护 的 路 由 时 获得 通 
知 。 然 后 调用 一 个 认证 服务 ， 查 询 用 户 是 否 提供 了 正确 的 凭证 。 
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要 检查 一 个 组 件 是 否 可 以 被 激活 ， 我 们 添加 了 一 个 守卫 类 到 路 由 需 配 置 的 canActivate 数 组 。 


让 我 们 再 次 修改 最 初 的 应 用 程序 , 添加 用 户 名 和 密码 输入 框 以 及 一 个 新 的 被 保护 的 路 由 , 该 
路 由 只 在 提供 了 指定 的 用 户 名 和 密码 组 合 后 才能 被 访问 。 





























o 示例 代码 本 节 例 子 的 完整 代码 可 以 在 示例 代码 中 的 routes/auth 目 录 中 找到 。 
查阅 README.md 文 件 ， 了 解构 建 和 运行 本 例 的 步骤 。 


7.11.1 AuthService 
我 们 来 创建 一 个 十 分 简单 的 最 小 化 服务 ， 负 责 认 证 和 授权 资源 。 


code/routes/auth/app/ts/services/A uthService.ts 


import { Injectable } from '@angular/core'; 


@Injectable() 
export class AuthService { 
login(user: string, password: string): boolean { 
if (user === 'user' && password === 'password') { 
localStorage.setItem('username', user); 
return true; 


} 


return false; 


} 


login 方 法 将 在 提供 的 用 户 名 和 密码 为 'user' 和 'password' 时 返回 true。 此 外 , 在 它们 匹配 
时 ， 使 用 localStorage 来 保存 用 户 名 。 它 标志 着 应 用 程序 是 否 有 一 个 仍然 活跃 的 已 登录 用 户 。 


























O 如 果 你 不 熟悉 ,这 里 解释 一 下 : localStorage 是 HTML5 提 供 的 键 值 对 ， 用 来 在 
浏览 DIE e 中 保存 信息 Wo 





它 的 API 非 常 简 单 ， 仅 仅 包 含 了 设置 、 读 取 和 删除 里 面 项 目的 方法 。 
参见 MDN 上 的 Storage 文 档 ?" 查 看 详情 。 
logout 方 法 清除 了 username 值 。 








code/routes/auth/app/ts/services/AuthService.ts 


logout(): any ( 
localStorage.removeItem( 'username' ); 


} 





(D https://developer.mozilla.org/en-US/docs/Web/API/Storage 
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最 后 两 个 方法 是 : 


Q getUser, 返回 用 户 名 或 者 null; 
QO) isLoggedIn, fii FgetUser ( ) 并 在 有 用 户 时 返回 true。 


下 面 是 这 些 方法 的 代码 。 


code/routes/auth/app/ts/services/AuthService.ts 








getUser(): any { 
return localStorage.getltem( 'username'); 


j 
isLoggedIn(): boolean { 

return this.getUser() !-- null; 
j 





最 后 一 件 要 做 的 事 是 导出 一 个 AUTH_PROVIDERS ， 这 样 可 以 将 其 注入 到 应 用 中 。 











code/routes/auth/app/ts/services/AuthService.ts 


export var AUTH_PROVIDERS: Array<any> = [ 
{ provide: AuthService, useClass: AuthService } 





]; 











至 此 ， 我 们 有 了 用 于 注入 到 组 件 的 AuthService 服 务 ， 可 以 实现 用 户 登 录 、 检 查 当 前 登录 用 


户 和 用 户 登 出 等 。 





随后 ， 我 们 还 将 在 路 由 器 中 使 用 它 来 保护 ProtectedComponent 。 不 过 我 们 首先 创建 用 于 登 


录 的 组 件 。 


7.11.2 LoginComponent 











这 个 组 件 将 在 没有 登录 用 户 的 时 候 显示 登录 表单 , 或 者 显示 一 条 包含 了 用 户 信 ， 


的 小 横幅 。 
下 面 是 login 和 1ogout 方 法 的 代码 。 


code/routes/auth/app/ts/components/LoginComponent.ts 





export class LoginComponent { 
message: string; 


constructor(private authService: AuthService) { 
this.message = ''; 


} 


login(username: string, password: string): boolean { 
this.message = ''; 
if (!this.authService.login(username, password)) { 
this.message = ‘Incorrect credentials.'; 
setTimeout(function() { 





息 和 登录 链接 
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this.message = ''; 
}.bind(this), 2500); 
} 


return false; 


ogout(): boolean { 
this. authService. logout(); 
return false; 





在 服务 验证 用 户 凭证 后 ， 我 们 就 登 和 用户。 
根据 用 户 的 登录 状态 ， 组 件 模板 中 有 两 段 代码 片段 分 别 被 显示 出 来 。 


第 一 段 是 登录 表单 ， 受 到 *kngIf="!authService.getUser()" 保 护 。 














code/routes/auth/app/ts/components/LoginComponent.ts 


<form class-"form-inline" *ngI f="! authService.getUser()"> 
<div class=" form-group"> 
«label for="username">User: </label> 
«input class-"form-control" name-"username" #username> 
«/div» 


«div class-"form-group"» 

«label for="password"»>Password: </label> 

«input class-"form-control" type="password" name="password" #password> 
</div> 


<a class="btn btn-default" (click)="login(username.value, password.value)"> 
Submit 
</a> 
</form> 


第 二 段 是 信息 横幅 ， 包 含 了 登 出 链接 ， 受 到 相反 的 xngIf="authService.getUser()" 保 护 。 


code/routes/auth/app/ts/components/LoginComponent.ts 





«div class="well" x*ngIf="authService.getUser()"> 
Logged in as <b>{{ authService.getUser() }}</b»> 
«a href (click)="logout()">Log out«/a» 

«/div» 


另外， 在 出 现 验 证 错误 时 ,会 显示 一 段 代码 片段 。 


code/routes/auth/app/ts/components/LoginComponent.ts 


«div class="alert alert-danger" role-"alert" *nglf="message"> 
{{ message }} 
</div> 


现在 我 们 就 可 以 处 理 用 户 登录 了 ， 接 下 来 创建 想 要 被 用 户 登 录 保护 的 资源 。 








186 第 7 章 路 由 





7.11.3 ProtectedComponent 组 件 和 路 由 守卫 


1. ProtectedComponent 
要 保护 组 件 ， 必 先 有 组 件 。ProtectedComponent 组 件 很 简明 。 


code/routes/auth/app/ts/components/ProtectedComponent.ts 
/* 


* Angular 
*/ 


import {Component} from '@angular/core'; 
@Component ( { 


selector: 'protected', 
template: ~<h1>Protected content«/h1»^ 


}) 

export class ProtectedComponent { 

} 

我 们 希望 只 有 登录 的 用 户 可 以 访问 这 个 组 件 。 但 是 如 何 才 能 做 到 呢 ? 

答案 是 使 用 路 由 器 钧 子 canActivate， 连 接 到 一 个 实现 CanActivate 接 口 的 守卫 类 。 
2. LoggedInGuard 守 卫 

新 建 一 个 名 为 guards 的 目录 ， 然 后 新 建 loggedIn.guard.ts 文 件 。 


code/routes/auth/app/ts/guards/loggedIn.guard.ts 

















import { Injectable } from 'Gangular/core'; 

import { CanActivate } from 'Gangular/router'; 

import { AuthService } from 'services/AuthService'; 

GInjectable() 

export class LoggedInGuard implements CanActivate { 
constructor(private authService: AuthService) {} 


canActivate(): boolean { 
return this.authService.isLoggedIn(); 
j 
j 


该 守卫 声明 了 它 实 现 CanActivate 接 口 。 可 以 通过 实现 canActivate 方 法 满足 这 个 声明 。 
我 们 注入 AuthService 到 这 个 类 的 构造 函数 ， 并 将 其 保存 到 私有 变量 authService。 

在 canActivate 函 数 中 ， 我 们 通过 this .AuthService 来 检查 用 户 的 登录 状态 isLoggedIn。 
3. 配置 路 由 器 

为 了 使 用 这 个 守卫 ， 我 们 需要 这 样 配置 路 由 器 : 

(1) 导入 LoggedInGuard 
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(2) 在 路 由 配置 中 使 用 LoggedInGuard; 

(3) 添加 LoggedInGuard 到 提供 者 列表 中 ( 这 样 它 就 可 以 被 注入 了 )。 
我 们 在 app.ts 中 实现 以 上 步 又 。 

首先 导入 LoggedInGuard。 


code/routes/auth/app/ts/app.ts 





import {AUTH_PROVIDERS} from 'services/AuthService'; 
import {LoggedInGuard} from 'guards/loggedIn.guard'; 


然后 将 带 有 守卫 的 canActivate 添 加 到 被 保护 的 路 由 。 


code/routes/auth/app/ts/app.ts 








const routes: Routes = [ 


{ path: '', redirectTo: 'home', pathMatch: 'full' }, 
{ path: 'home', component: HomeComponent }, 

{ path: 'about', component: AboutComponent }, 

{ path: 'contact', component: ContactComponent }, 

{ path: 'protected', component: ProtectedComponent, 


canActivate: [LoggedInGuard] } 
]; 


最 后 将 LoggedInGuard 添 加 到 提供 者 列表 中 。 


code/routes/auth/app/ts/app.ts 


providers: [ 
AUTH_PROVIDERS, 
LoggedInGuard, 
{ provide: LocationStrategy, useClass: HashLocationStrategy }, 


] 
4. APSR 
我 们 必须 添加 : 


code/routes/auth/app/ts/app.ts 


import {LoginComponent} from 'components/LoginComponent' ; 


然后 添加 : 

(1) 一 个 新 链接 ， 指 向 被 保护 的 路 由 ; 

(2) clogin> 标 签到 模板 中 ， 用 来 演 染 新 组 件 。 
下 面 是 app.ts 的 代码 。 


code/routes/auth/app/ts/app.ts 





@Component( { 
selector: 'router-app', 
template: ` 
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«div class-"page-header"» 
«div class="container"> 
«hi»Router Sample«/h1» 
«div class="navLinks"> 
«a [routerLink]="['/home' ] "»Home«/a» 
«a [routerLink]="['/about' ]">About</a> 
«a [routerLink]="['/contact']">Contact Us</a> 
«a [routerLink]="['/protected']">Protected</a> 
</div> 
</div> 
</div> 


«div id="content"> 
«div class="container"> 


«login»«/login» 
«hr» 


«router-outlet»«/router-outlet» 
«/div» 
«/div» 


}) 
class RoutesDemoApp { 
constructor(private router: Router) { 


现在 ， 在 浏览 需 打 开 应 用 时 ， 我 们 可 以 看 到 新 的 登录 表单 和 被 保护 的 链接 〈 如 图 7-8 所 示 )。 


Felipe 


" ezox*eouoouos 


ee ng-book 2: Angular 2 HTT x 





CS © | D localhost:8080/#/home 





Router Sample 


Home About Contact us Protected 


User: Password: Submit 


Welcome! 














图 7-8 ”认证 应 用 : 初始 页 
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如 果 点 击 被 保护 的 链接 , 什么 也 不 会 发 生 。 手动 访问 http://localhost:8080/#/protected 的 效果 也 
是 一 样 o 


在 表单 中 输入 用 户 名 和 密码 ， 点 击 Submit 按 钮 。 你 将 看 到 一 条 显示 了 当前 用 户 的 横幅 ( 如 图 
7-9 所 示 )。 
y Pere B es«eouosotu2 Ue 





Router Sample 


Home About Contact us Protected 


Logged in as user Log out 


Welcome! 

















图 7-9 ”认证 应 用 : 登录 后 


正如 我 们 所 料 ， 在 点 击 被 保护 的 链接 时 ,我们 被 重 定向 了 ,而且 组 件 也 被 演 染 了 ( 如 图 7-10 
所 示 )。 

















A 安全 注意 事项 : 在 过 于 依赖 客户 端 路 由 保护 为 我 们 提供 安全 性 之 前 ， 理 解 它 的 
工作 机 制 是 至 关 重 要 的 。 实 际 上 ， 你 应 该 把 客户 端 路 由 保护 看 作用 户 体验 的 一 

种 形式 ， 而 不 是 安全 的 一 种 形式 。 
归根 到 底 ， 应 用 的 所 有 JavaScript 代 码 都 会 服务 于 客户 端 。 不 管用 户 是 否 已 经 登 
录 ， 这 些 代码 都 能 被 检测 到 。 
因此 ， 如 果 有 敏感 数据 需要 保护 ， 你 必须 使 用 服务 器 端 认 证 来 保护 它们 。 也 就 
是 说 ， 对 每 条 查询 数据 的 请 求 ， 都 要 求 用 户 提供 一 个 服务 器 验证 的 有 效 API 密 负 
(或 者 认证 令 牌 )。 
构建 完整 的 认证 系统 超出 了 本 书 的 范围 。 最 重要 的 是 要 明白 ， 在 客户 端 保护 路 
由 并 不 一 定 会 阻挡 任何 人 查看 这 些 路 由 背后 的 JavaScript 页 面 。 
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认证 应 | Js 受 保护 区 
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叫 作 “ 产 品 ” 的 区 域 。 

















怎么 办 ? 


在 它 的 子 级 路 由 中 使 用 这 些 功能 。 
假设 我 们 有 个 网 站 ， 它 有 一 个 “我 们 是 谁 ? ”区 域 ， 允 许 用户 了 解 我 们 的 团队 。 它 还 有 一 个 


























我 们 可 能 认为 “我 们 是 诊 
然后 ， 在 访问 这 些 区域 时 ， 我 们 很 高 兴 地 显示 了 所 有 团队 和 所 有 产品 。 
但 是 , 如 果 随 着 网 站 的 成 长 , 我们 需要 显示 团队 中 每 个 人 的 个 人 信息 以 及 每 种 产品 的 信息 该 


为 了 支持 这 种 情况 ， 路 


rh 




















E? ”的 完美 路 由 是 /about,“ 产 品 ” 的 完美 路 由 是 /products。 








HH 

















IE RFA ENRE 





o 





组 件 也 可 以 有 自己 的 router-outlet。 





下 面 用 一 个 示例 进行 讲解 。 
在 本 例 中 , 我 们 有 一 个 产品 区 , 用 户 在 其 中 可 以 通过 访问 一 个 特殊 的 URL 查 看 两 种 推荐 的 产 


你 可 以 有 多 重山 套 的 router-outlet。 这 样 ， 应 用 的 每 个 区 域 都 可 以 有 自己 的 子 组 件 ， 这 些 
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品 。 对 于 其 他 的 产品 ， 路 由 会 使 用 产品 ID。 


示例 代码 ”本 节 例 子 的 完整 代码 可 以 在 示例 代码 中 的 routes/nested 目 录 中 找到 。 
查阅 README.md 文 件 ， 了 解构 建 和 运行 本 例 的 步骤。 


7.12.1 配置 路 由 
首先 在 app.ts 文 件 中 描述 两 种 顶级 路 由 。 


code/routes/nested/app/ts/app.ts 


const routes: Routes = [ 

{ path: '', redirectTo: 'home', pathMatch: 'full' }, 

{ path: 'home', component: HomeComponent }, 

{ path: 'products', component: ProductsComponent, children: childRoutes } 


]; 
home 路 由 看 起 来 很 眼熟 ;注意 prodqucts 有 个 chi ldren 参 数 。 它 是 从 哪儿 来 的 ?我 们 在 定义 
ProductsComponent 时 定义 了 childRoutes。 


























7.12.2 ProductsComponent 组 件 
这 个 组 件 有 自己 的 路 由 配置 。 


code/routes/nested/app/ts/components/ProductsComponent.ts 


export const routes: Routes = [ 

{ path: '', redirectTo: 'main',pathMatch: 'full'}, 
{ path: 'main', component: MainComponent }, 

{ path: ':id', component: ByIdComponent }, 

{ path: 'interest', component: InterestComponent }, 
{ path: 'sportify', component: SportifyComponent }, 
]; 


注意 , 在 第 一 个 对 象 上 面 有 个 空 的 path。 这 么 做 是 为 了 在 访问 /products 时 重 定向 到 main 路 由 。 

我 们 要 看 的 男 一 个 路 由 是 :id。 在 这 种 情况 下 ， 当 用 户 访 问 一 些 没有 可 以 匹配 的 路 由 时 ， 此 
路 由 就 会 垫底 。 在 /之 后 传 进 来 的 一 切 都 将 被 提取 为 路 由 的 参数 ， 即 1d。 

然后 在 组 件 的 路 由 咒 中 为 每 种 静态 子路 由 添加 一 个 链接 。 


code/routes/nested/app/ts/components/ProductsComponent.ts 




















«a [routerLink]="['./main']">Main</a> | 
«a [routerLink]="['./interest']">Interest</a> | 
«a [routerLink]="['./sportify']">Sportify</a> | 




















可 以 看 到 路 由 链接 的 格式 都 是 [' ./main'] ， 前 面 有 ./。 它 表明 了 导航 到 main 路 由 是 相对 于 
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当前 路 由 上 下 文 的 。 
你 也 可 以 用 ['products'，'main'] 的 形式 声明 路 由 。 这 么 做 的 坏处 是 ， 子 路 由 知晓 父 路 由 ; 
果 想 要 移动 或 者 复 用 该 组 件 ， 可 能 需要 重新 编写 路 由 链接 。 


添加 链接 后 , 我 们 添加 一 个 输入 框 让 用 户 可 以 输入 产品 ID , 以 及 一 个 按钮 在 点 击 后 导航 到 该 
产品 。 最 后 添加 了 router-outlet。 








xr 
n 


























code/routes/nested/app/ts/components/ProductsComponent.ts 


template: ^ 
«h2»Products«/h2» 


«div class="navLinks"> 


«a [routerLink]="['./main']">Main</a> | 
«a [routerLink]="['./interest']">Interest</a> | 
«a [routerLink]="['./sportify']">Sportify</a> | 


Enter id: «input sid size="6"> 
«button (click)="goToProduct(id.value)">Go</button> 
«/div» 


«div class-"products-area"» 
«router-outlet»«/router-outlet» 
«/div» 





让 我 们 看 看 ProductsComponent 的 代码 。 


code/routes/nested/app/ts/components/ProductsComponent.ts 


export class ProductsComponent { 
constructor(private router: Router, private route: ActivatedRoute) { 


} 


goToProduct(id:string): void { 
this.router.navigate(['./', id], {relativeTo: this.route}); 


} 
} 


首先 , 我 们 在 构造 函数 中 声明 了 一 个 Router 的 实例 变量 ， 因 为 我 们 将 使 用 该 实例 来 通过 id 导 
航 到 产品 。 

想 要 查看 某 产品 时 ， 我 们 使 用 goToProduect 方 法 。 在 goToProduct 方 法 中 ， 我 们 调用 路 由 器 
的 navigate 方 法 并 提供 路 由 名 字 和 包含 路 由 参数 的 对 象 。 在 本 例 中 ， 我 们 简单 地 传递 了 id。 
注意 ， 我 们 在 navigate 函数 中 使 用 相对 路 径 ./。 为 了 使 用 相对 路 径 ， 我 们 还 要 将 一 个 
relativeTo 对 象 作为 选项 传人 ， 它 告诉 路 由 器 究竟 是 相对 于 哪个 路 由 。 

运行 应 用 程序 ， 我 们 将 看 到 主页 ， 如 图 7-11 所 示 。 
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Felipe | 
Ox renano 


@ © © / [^ ng-book 2: Angular 2 Roui x 








| € > Q D locathost:8080/#/home 





Router Sample 


Home Products 


Welcome! 

















图 7-11 REW H 
如 果 点 击 产 品 链接 ， 你 将 被 重 定向 到 /products/main， 如 图 7-12 所 示 。 


| Felipe 
Oc *eGuoodgos| 


@ © @ / [M ng-book 2: Angular 2 Rou x 











€ > C |D locathost:8080/#/products/main 





Router Sample 


Home Products. 


Products 


| 
| 
| 
| Main | Interest | Sportify | Enter id: | Go 


Welcome to the products section. Please select a product above. 














图 7-12 PEEBUEREERRE: 产品 区 
灰色 细 线 下 面 的 所 有 内 容 都 是 使 用 主 应 用 的 router-outlet 来 泻 染 的 。 
虚线 方 框 里 面 的 内 容 是 在 ProductComponent 的 router-outlet 中 泻 染 的 。 这 就 是 配置 父 级 和 
子 级 路 由 分 别 进 行 泻 染 的 方法 。 
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当 访 问 其 中 一 个 产品 链接 时 ， 或 者 在 文本 框 中 输入 id 并 点 击 Go 按 钮 后 ， 新 的 内 容 将 在 
ProductComponent 组 件 中 的 路 由 出 口中 泻 染 ( 如 图 7-13 所 示 )。 





ece ng-book 2: Angular 2 Rou x Felipe 


€ > C [D localhost:8080/#/products/abo123 o:**oGuogoguos 





Router Sample 


Products 


Main | Interest | Sportify | Enter id: abct23 | Go 


You selected product: abc123 








图 7-13” 骸 套路 由 应 用 : 按 ID 查 询 产 品 


另外 ,值得 注意 的 是 Angular 的 路 由 需 很 智能 , 它 会 优先 使 用 具体 路 由 ( 比如 /products/spotify ), 
然后 才 使 用 参数 化 的 路 由 ( 比如 /products/123 )。 这样，/products/sportify 将 不 会 被 更 加 通用 的 、 捕 
捉 所 有 路 由 的 /products/:id 处 理 。 

藤 套 路 由 的 重 定 向 和 链接 

作为 回顾 ， 我 们 使 用 ['myRoute '] 来 导航 到 名 为 MyRoute 的 顶级 路 由 。 但 是 ， 只 有 当 你 在 同 
样 的 顶级 上 下 文中 时 ， 这 种 方法 才 可 行 。 

在 子 级 组 件 中 , 如 果 你 试图 链接 或 重 定向 到 ['myRoute ' ] , 路 由 需 将 试图 寻找 一 个 兄弟 路 由 ， 
故而 出 错 。 在 这 种 情况 下 ， 使 用 以 斜 杠 开头 的 [' /myRoute' ] o 

同样 ,在 顶级 上 下 文中 ， 如 果 想 要 链接 或 重 定向 到 一 个 子 级 路 由 ， 我 们 需要 使 用 路 由 定义 数 
组 的 多 个 元 素 。 

假设 我 们 想 要 访问 Show 路 由 ; 它 是 Product 路 由 的 子 级 。 在 这 种 情况 下 ,我 们 使 用 ['product ' ， 
'show'], ， 正 如 路 由 定义 所 示 。 
















































































7.13 ”总结 








正如 我 们 所 看 到 的 ， 全 新 的 Angular 路 由 器 非常 强大 和 灵活 。 现 在 就 在 你 的 应 用 中 使 用 路 
al | 
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依赖 注入 








随 着 程序 规模 的 增长 ， 我 们 常常 遇 到 应 用 模块 需要 相互 通信 的 情况 。 当 模块 A 需 要 模块 B 才 
能 运行 时 ， 我 们 就 说 B 是 A 的 依赖 。 




















获取 依赖 的 最 常见 方式 之 一 就 是 直接 导入 ( import ) 一 个 文件 。 例如， 在 某 个 假想 模块 中 ， 
我 们 可 以 这 么 做 : 

// in A.ts 

import (Bj from 'B'; // a dependency! 





B.foo(); // using B 








通常 ， 只 要 导入 其 他 代码 就 足够 了 ; 但 是 在 某 些 情况 下 ， 要 用 到 更 加 精巧 的 方式 提供 依赖 。 
口 如 果 我 们 想 在 测试 时 把 B 的 实现 替换 为 MockB ， 该 怎么 办 呢 ? 

口 如 果 我 们 想 在 整个 应 用 中 共享 B 类 的 单一 实例 C 比如 单 例 模 式 )， 该 怎么 办 呢 ? 

口 如 果 我 们 想 在 每 次 用 到 8B 类 时 都 创建 一 个 新 实例 ( 比如 工厂 模式 )， 该 怎么 办 呢 ? 

依赖 注入 可 以 解决 这 些 问题 。 























依赖 注入 (dependency injection, DI) 是 这 样 一 个 系统 : 它 让 程序 中 的 某 部 分 可 以 访问 其 他 
部 分 ， 而 且 我 们 可 以 配置 它们 的 访问 方式 。 





Q, 可 以 把 注入 器 看 作 new 操 作 符 的 替代 品 。 


依赖 注入 这 个 术语 既 被 用 来 描述 一 种 设计 模式 ( 可 用 于 很 多 种 框架 )， 也 被 用 来 指 代 Angular 
内 置 的 DI 实现 库 。 

















使 用 依赖 注入 技术 的 主要 优点 是 客户 代码 不 必 知 晓 如 何 创 建 依赖 , 它们 只 需要 与 那些 依赖 交 
互 就 可 以 了 。 
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8.1 注入 示例 : PriceService 


假设 我 们 有 一 个 Product 类 。 每 个 产品 都 有 一 个 基准 价格 。 我 们 要 靠 一 个 服务 来 计算 该 产品 
的 含 税 价 ， 它 需要 如 下 输入 : 
口 产品 的 基准 价格 
口 销售 时 所 在 的 州 ” 


下 面 是 不 使 用 依赖 注入 时 的 代码: 


class Product { 
constructor(basePrice: number) { 
this.service = new PriceService(); 
this.basePrice = basePrice; 


} 





























price(state: string) { 
return this.service.calculate(this.basePrice, state); 


} 
} 


想象 一 下 ,我 们 要 为 此 Product 类 写 一 个 测试 。 假 设 这 个 PriceSservice 类 要 使 用 数据 库 查 询 
来 获得 产品 在 指定 州 的 税率 。 如 果 这 样 写 测试 的 话 : 


let product; 




















beforeEach(() => { 
product = new Product(11); 


JJ$ 


describe('price', () => { 
it('is calculated based on the basePrice and the state', () => { 
expect(product.price('FL')).toBe(11.66); 
p 
}) 


尽管 这 个 测试 可 以 工作 , 但 是 暴露 了 一 些 缺 陷 。 为 了 让 这 个 测试 成 功 运行 ,需要 满足 两 个 前 
提 条 件 : 

(1) 数据 库 必须 保持 运行 ; 

(2) 佛罗里达 州 (代号 FL ) 的 税率 必须 始终 像 我 们 期 望 的 一 样 。 

根本 原因 在 于 : Product 类 和 PriceService 类 (而 它 又 依赖 于 数据 库 ) 之 间 突 无 的 强烈 依赖 
会 让 我 们 的 测试 变 得 更 脆弱 。 

如 果 稍 微 改 写 一 下 Product 类 呢 ? 

















在 美国 ， 不 同 州 的 税率 有 所 不 同 。 一 一 译 者 注 
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class Product { 
constructor (service: PriceService, basePrice: number) { 
this.service = service; 
this.basePrice = basePrice; 


} 


price(state: string) { 
return this.service.calculate(this.basePrice, state); 
} 
} 


现在 ， 当 要 创建 Product 的 实例 时 ， 客 户 方 代 码 可 以 决定 把 PriceService 的 哪个 具体 实现 传 
给 这 个 新 实例 了 。 


这 样 ， 只 要 创建 一 个 mock 版 本 的 PriceService 类 就 可 以 大 幅 简 化 测试 了 : 


class MockPriceService { 
calculate(basePrice: number, state: string) { 
if (state === 'FL') { 
return basePrice x 1.06; 


} 











return basePrice; 
j 
j 


基于 这 个 小 改动 ， 我 们 就 可 以 微调 测试 ， 移 除 它 对 数据 库 的 依赖 : 


let product; 





beforeEach(() => { 
const service = new MockPriceService(); 
product = new Product(service, 11); 


}); 


describe('price', () => { 
it('is calculated based on the basePrice and the state', () => { 
expect(product.price('FL')).toBe(11.66); 
2); 
}) 


另 一 个 好 处 是 我 们 现在 能 更 加 确信 自己 正在 不 受 外 界 影响 地 测试 Product 类 。 也 就 是 说 ， 我 
们 能 确保 该 类 正在 使 用 一 个 行为 上 可 预测 的 依赖 。 
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这 种 注入 依赖 的 技术 是 基于 一 项 被 称 为 控制 反 转 的 设计 原则 。 
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控制 反 转 (inversion of control, IoC) 原则 的 非 正 式 称谓 是 “好 莱 雹 法 则 ”。 它 
来 自 好 莱 坞 的 一 名 常用 语 “ 别 打 给 我 们 ， 我 们 会 打 给 你 (don’t call us, we'll call 
you 


多 年 以 来 ， 它 在 与 全 应 用 语 境 相 关 的 部 件 ( 指 组 件 、 服 务 、 管 道 等 Angular 代 码 块 ) 中 用 得 
非常 普遍 ， 也 常 被 用 来 解决 依赖 的 创建 和 设置 问题 。 这 一 点 在 例子 中 体现 得 很 清楚 : Product 
不 得 不 了 解 PriceService 类 。 


问题 在 于 ,一 旦 部 件 变 得 过 于 关心 它 的 依赖 ,部件 本 身 就 会 变 得 脆弱 而 难以 修改 。 如 果 我 们 
修改 了 一 个 部 件 , 这 项 修改 就 会 向 上 扩散 到 所 有 依赖 它 的 部 件 中 。 它 会 影响 到 程序 中 很 多 不 同 的 
区 域 ， 甚 至 可 能 超出 程序 的 边界 。 换 句 话 说 ， 这 些 部 件 之 间 产 生 了 紧 厅 合 。 

使 用 依赖 注入 ,我们 就 可 以 得 到 一 个 更 加 松 耦 合 的 架构 。 这 时 ， 当 修改 单一 部 件 时 ， 对 程序 
中 其 他 区 域 的 影响 就 小 多 了 。 同 时 ,只 要 这 些 部 件 之 间 的 接口 没有 变 , 我 们 甚至 可 以 在 不 修改 其 
他 部 件 中 实现 代码 的 情况 下 集体 更 换 它们 。 

Angular 从 AngularJS 中 继承 来 的 一 项 伟大 特性 就 是 它们 都 使 用 这 种 控制 反 转 模式 。Angular 使 
用 自 带 的 依赖 注入 机 制 来 解析 这 些 依 赖 。 

在 传统 方式 下 ， 如 果 部 件 A 需 要 依赖 部 件 B， 那 就 意味 着 A 要 在 内 部 创建 一 个 B 的 实例 ， 也 就 
是 A 依赖 于 B( 如 图 8-1 所 示 )。 


创建 实例 
服务 A 服务 B 
时 


图 8-1 不 用 依赖 注入 框架 下 


Angular 利 用 依赖 注入 机 制 改变 了 这 一 点 。 在 这 种 机 制 下 ， 如 果 需 要 在 部 件 A 中 用 到 部 件 B， 
我 们 就 应 该 期 待 B 被 传 给 A( 如 图 8-2 所 示 )。 


ES 


1. 得 到 注册 2. 声明 对 B 的 依赖 
cE 
DI 








































































































框架 3. 注 入 B 

















图 8-2 ”使 用 依赖 注入 框架 时 
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在 传统 场景 下 ， 这 带 来 了 很 多 优点 。 一 个 优点 就 是 : 如 果 我 们 准备 单独 测试 A， 可 以 创建 一 
个 mock 版 本 的 B， 并 把 它 注 入 到 A 中 。 

在 本 书 的 前 面 ， 我 们 已 经 多 次 用 过 服务 和 依赖 注入 了 ， 比 如 在 第 7 章 创 建 音 乐 应 用 时 。 为 了 
与 Spotify API 交 互 ， 我 们 创建 了 SpotifyService。 它 被 注入 到 了 很 多 部 件 中 ， 比 如 下 面 这 个 来 自 
AlbumComponent 的 片段 。 


code/routes/music/app/ts/components/AlbumComponent.ts 


export class AlbumComponent implements OnInit { 
id: string; 
album: Object; 


constructor(private route: ActivatedRoute, 
private spotify: SpotifyService, // <-- injected 
private location: Location) { 
route.params.subscribe(params => { this.id = params['id']; }); 


现在 ， 我 们 就 来 学 习 如 何 创建 自己 的 服务 以 及 能 用 哪些 形式 注入 它们 吧 。 
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要 注册 一 个 依赖 , 我 们 就 得 找到 一 些 东 西 作为 那个 依 
(token )。 比 如 ， 如 果 我 们 想 要 注册 某 个 API 的 URL ， 就 可 以 用 字符 串 API_URL 作 为 令 牌 。 同 样 ， 
如 果 我 们 要 注册 一 个 类 ， 就 可 以 使 用 这 个 类 本 身 作 为 它 的 令 牌 ， 就 像 我 们 即将 看 到 的 。 


在 Angular 中 ， 依 赖 注入 包括 如 下 三 部 分 。 





赖 的 标识 。 这 个 标识 被 称 为 依赖 的 令 牌 i] 





是 类 ) 映射 到 一 个 依 





O 提供 者 (也 常 被 称 为 绑 定 ) 负责 把 一 个 令 牌 (可 能 是 字符 串 也 可 能 是 
赖 的 列表 。 它 告诉 Angular 该 如 何 根 据 指定 的 令 牌 创建 对 象 。 
口 注入 器 负责 持 有 一 组 绑 定 ; 当 外 界 要 求 创建 对 象 时 ， 解 析 这 些 依赖 并 注入 它们 。 


口 依赖 就 是 将 被 用 于 注入 的 对 象 。 
我 们 可 以 借助 图 8-3 来 理解 它们 各 自 扮 演 的 角色 。 











Jr 


注册 解 





图 8-3 ”依赖 注入 
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与 依赖 注入 打交道 时 ， 有 很 多 不 同 的 选项 ， 我 们 来 分 别 看 看 它们 的 用 途 。 

最 常见 的 情况 是 提供 一 个 服务 或 值 ， 它 将 在 整个 应 用 中 保持 一 致 。 在 我 们 的 应 用 中 ，99% 的 
场景 可 能 都 属于 这 种 情况 。 

既然 这 就 是 我 们 要 做 的 一 切 , 那 就 在 下 一 节 示 范 怎 样 写 一 个 基本 的 服务 吧 , 因为 它 正 是 我 们 
在 开发 大 多 数 应 用 的 大 部 分 时 间 里 所 需要 的 。 

说 的 够 多 了 ， 开 始 编码 ! 









































8.4 ”尝试 注入 器 

就 像 前 面 提 到 过 的 ，Angular 会 在 幕后 帮 我 们 设置 好 依赖 注入 。 不 过 ， 在 我 们 和 注解 打交道 
并 且 把 依赖 注入 集成 到 部 件 中 之 前 ， 自 己 先 尝试 使 用 一 下 注入 器 。 

先 来 创建 一 个 直接 返回 字符 串 的 示例 服务 。 


code/dependency_injection/injector/app/ts/app.ts 
/* 


* The injectable service 
*/ 
class MyService { 
getValue(): string { 
return ‘a value'; 
} 
} 


接 下 来 ， 创 建 该 应 用 的 组 件 。 























code/dependency_injection/injector/app/ts/app.ts 


@Component ( { 
selector: 'di-sample-app', 
template: ^ 
«button (click)="invokeService()">Get Value«/button» 


}) 
class DiSampleApp { 
myService: MyService; 


constructor() { 
let injector: any = ReflectiveInjector.resolveAndCreate( [MyService] ); 
this.myService = injector.get(MyService); 
console.log('Same instance?', this.myService === injector.get(MyService) ); 


} 





invokeService(): void { 
console.log('MyService returned', this.myService.getValue()); 
j 
j 
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下 面 对 这 个 过 程 进 行 分 解 。 我 们 首先 声明 了 DiSampleApp 组 件 ， 它 会 泻 染 出 一 个 按钮 。 当 点 
击 此 按钮 时 就 会 调用 invokeService 方 法 。 


子 细 看 该 组 件 的 构造 函数 就 会 发 现 ,我 们 正在 使 用 一 个 来 自 ReflectiveInjector 的 静态 方 
法 ， 名 为 resolveAndCreate。 该 方法 负责 创建 一 个 新 的 注入 器 。 我 们 传 给 它 的 参数 是 一 个 数组 ， 
其 中 是 这 个 新 注入 器 需要 知道 的 可 供 注 入 物 。 在 这 个 例子 中 ， 它 知道 Myservice 这 个 可 注入 物 就 
ET. 








e ReflectiveInjector 是 Injector 的 一 个 具体 实现 ， 它 使 用 反射 (reflection ) 机 
制 来 找 出 正确 的 参数 类 型 。 虽 然 也 有 一 些 别 的 注入 器 ， 不 过 在 大 多 数 应 用 中 ， 
ReflectiveInjector 应 该 是 最 常用 的 “常规 ”注入 器 了 。 





需要 注意 的 一 点 是 : 它 会 注入 该 类 的 一 个 单 例 对 象 。 

这 可 以 从 构造 函数 中 的 最 后 两 行 得 到 验证 。 首 先 要 求 刚 创建 的 注入 器 给 我 们 一 个 MyService 
类 的 实例 ， 然后 把 它 存 人 组 件 的 myService 字 段 。 之 后 ， 在 console .1og 函 数 中 要 求 注入 需 再 次 
给 我 们 一 个 MyService 的 实例 ， 并 输出 它 与 nyService 字 段 进行 比较 的 结果 : 

console.log('Same instance?', this.myService === injector.get(MyService) ); 

我 们 可 以 在 控制 台中 确认 这 两 个 实例 确实 是 指向 同一 个 对 象 的 引用 : 

Same instance? true 


注意 ， 由 于 使 用 了 自己 的 注入 器 ， 我 们 并 不 需要 在 启动 时 把 MyService 加 入 NgModule 的 
providers 列 表 中 。 






































code/dependency_injection/injector/app/ts/app.ts 


@NgModule( { 
declarations: [ DiSampleApp ], 
imports: [ BrowserModule ], 
bootstrap: [ DiSampleApp ] 


}) 
class DiSampleAppModule {} 


platformBrowserDynamic().bootstrapModule(DiSampleAppModule); 
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不 过 ， 在 正常 情况 下 ， 还 是 得 告诉 NgModule 要 注入 哪些 提供 者 。 
比如 ， 我 们 想 让 该 MyService 单 例 对 象 在 整个 应 用 中 都 能 被 注入 。 
为 了 能 够 注入 ， 必 须 把 它们 添加 到 NgModule 的 providers 属 性 中 。 示 例 代 码 如 下 : 


@NgModule( { 
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declarations: [ 
MyAppComponent, 
// other components ... 


] 


providers: [ MyService ] // «-—- here 
}) 


class MyAppModule {} 
iXfÉ, MyAppComponent3 BETEMyServiceil A Fait KRUP T : 
export class MyAppComponent { 


constructor(private myService: MyService /x «-- injected x/) { 
// do something with myService here 


} 


Lf we. 
} 


当 我 们 把 这 个 类 本 身 放 进 providers 中 时 : 
providers: [ MyService | 
就 是 在 告诉 Angular: 当 MyService 被 注入 时 ， 我 们 希望 提供 MyService 的 一 个 单 例 实 例 。 


=| 


为 这 种 需求 非常 普遍 ， 所 以 这 个 类 实际 上 是 一 种 缩写 形式 ， 其 等 价 的 完整 配置 方式 是 : 






































providers: [ 
{ provide: MyComponent, useClass: MyComponent } 


] 
除了 创建 类 的 实例 之 外 ， 还 有 很 多 其 他 的 方式 可 以 进行 注入， 接 下 来 就 来 逐个 查看 。 





8.6 提供 者 
Angular 的 依赖 注入 体系 有 很 多 精巧 之 处 ， 其 中 之 一 是 我 们 有 很 多 种 方式 来 配置 注 和 人 过程。 
比如 可 以 : 
口 注入 一 个 类 的 〈 单 例 ) 实例 ; 
口 调用 任意 函数 ， 并 注入 该 函数 的 返回 结果 ; 
口 注入 一 个 值 ; 
口 创建 一 个 别名 。 
下 面 分 别 用 例子 进行 解释 。 











8.6.1 使 用 类 
注入 类 的 单 例 实 例 大 概 是 最 常见 的 注入 类 型 了 。 
配置 方法 如 下 : 
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{ provide: MyComponent, useClass: MyComponent } 


需要 注意 的 是 : provide 配 置 方法 接收 两 个 键 (key )。 第 一 个 provide 键 是 我 们 用 作 这 个 可 
注入 对 象 标识 的 令 牌 ， 第 二 个 useclass 键 用 来 指出 注入 什么 以 及 如 何 注 入 。 


在 这 里 ， 我 们 把 MyComponent 类 映射 到 了 MyComponent 令 牌 。 在 这 个 例子 中 ， 类 名 和 令 牌 名 
是 匹配 的 。 这 是 最 常见 的 情况 ， 但 是 必须 知道 : 令 牌 和 被 注入 物 并 不 一 定 同名 。 


如 前 所 见 , 该 例子 中 的 注入 器 将 会 在 幕后 创建 一 个 单 例 对 象 ， 并 在 每 次 注入 它 时 返回 同一 个 
实例 。 


当然 ， 首 次 注入 时 它 尚未 实例 化 ， 需 要 创建 一 个 Mycomponent 实 例 。 此 时 ， 依 赖 注入 系统 就 
会 调用 该 类 的 构造 函数 。 


如 果 服 务 的 构造 函数 需要 一 些 参数 ， 会 怎么 样 呢 ? 假设 我 们 有 这 样 一 个 服务 。 























code/dependency_injection/misc/app/ts/app.ts 
class ParamService { 
constructor(private phrase: string) { 
console.log('ParamService is being created with phrase', phrase); 


} 


getValue(): string { 
return this.phrase; 
j 
j 


注意 , 它 的 构造 函数 需要 传人 一 个 短语 作为 参数 。 如 果 我 们 使 用 标准 注 人 机制 ， 就 会 在 浏览 
何 中 看 到 一 个 错误 ， 如 图 8-4 所 示 。 








Cannot resolve all parameters for 'ParameterService'(?). Make sure that all the lang. js:375 
parameters are decorated with Inject or have valid type annotations and that 'ParameterService' is 
decorated with Injectable. 





图 8-4 ”注入 错误 

这 是 因为 我 们 没有 为 注入 器 提供 足够 的 信息 来 构造 这 个 类 。 要 解决 这 个 问题 ， 就 得 告诉 注入 
器 在 创建 该 服务 的 实例 时 要 使 用 哪个 参数 。 

如 果 想 在 创建 服务 时 传人 一 个 参数 ， 就 要 改 用 工厂 了 。 











8.6.2 ”使 用 工厂 
如 果 要 使 用 工厂 进行 注入 ， 就 需要 写 一 个 返回 任意 对 象 的 函数 。 
{ 


provide: MyComponent, 
useFactory: () => { 
if (loggedIn) { 
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return new MyLoggedComponent(); 


} 


return new MyComponent(); 
j 
j 
注意 , 在 这 个 例子 中 , 我 们 注入 时 用 的 令 牌 是 Mycomponent, 但 是 它 会 检查 ( 作用 域外 面 的 ) 
1oggedIn 变 量 。 如 果 1oggedIn 为 真 , 则 注入 需 会 返回 一 个 MyLoggedComponent 的 实例 ; 否则 返回 


MyComponent 的 实例 。 
工厂 还 可 以 拥有 自己 的 依赖 : 
{ 


provide: MyComponent, 
useFactory: (user) => { 
if (user.loggedIn()) { 
return new MyLoggedComponent(user); 
} 
return new MyComponent(); 
) 
deps: [ User ] 
j 


ERE, WRZE AParamService, RAMIE HuseFactory WERK. 



































code/dependency_injection/misc/app/ts/app.ts 


@NgModule( { 
declarations: [ DiSampleApp ], 
imports: [ BrowserModule ], 


bootstrap: [ DiSampleApp ], 
providers: [ 
SimpleService, 


{ 
provide: ParamService, 
useFactory: (): ParamService => new ParamService('YOLO' ) 


} 
] 


}) 
class DiSampleAppAppModule {} 


plat formBrowserDynamic( ) .bootstrapModule(DiSampleAppAppModule ) 
.catch((err: any) => console.error(err)); 


我 们 可 以 把 SimpleService ÉL 42x f£ providers f] RP, ix X E] Æ Simple- 
Service 并 不 需要 任何 参数 。 它 会 被 翻译 成 : 


{ provide: SimpleService, useClass: SimpleService } 








可 以 说 ， 工 厂 是 创建 可 注入 对 象 的 最 强 方式 ， 因 为 我 们 可 以 在 工 三 函数 中 “为 所 和 欲 为 ”。 
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8.6.3 使 用 值 
当 我 们 需要 一 个 常量 ,而 它 可 能 会 根据 应 用 的 其 他 部 分 甚至 环境 进行 重 定义 时 C 比如 测试 环 
境 或 生产 环境 )， 这 种 方式 非常 有 用 。 
{ provide: 'API_URL', useValue: 'http://my.api.com/v1' } 


在 8.9 节 中 ， 我 们 会 提供 一 个 更 完善 的 例子 。 











8.64 使 用 别名 
我 们 还 可 以 制造 一 个 别名 来 引用 以 前 注册 过 的 令 牌 ， 比 如 : 


{ provide: NewComponent, useClass: MyComponent } 





8.7 ”应 用 中 的 依赖 注入 
当 我 们 开发 应 用 时 ， 需 要 经 过 三 步 才能 进行 依赖 注入 : 
(1) 创建 该 服务 的 类 ; 
(2) 在 准备 接受 注入 的 部 件 上 声明 该 依赖 ; 
(3) 配置 要 注入 的 依赖 〈 比如 在 我 们 的 NgModule 中 通过 Angular 注 册 要 注入 的 依赖 )。 


我 们 要 做 的 第 一 件 事 是 创建 该 服务 的 类 , 该 类 会 暴露 出 我 们 想 要 用 到 的 那些 行为 。 它 也 被 称 
为 可 注入 对 象 ， 因 为 它 就 是 我 们 的 部 件 将 通过 依赖 注入 接收 到 的 东西 。 


下 面 示范 如 何 创建 服务 。 


code/dependency_injection/simple/app/ts/services/A piService.ts 














export class ApiService { 
get(): void { 
console.log('Getting resource...'); 


} 
} 


现在 已 经 有 了 要 注入 的 东西 ， 接 下 来 要 声明 当 Angular 创 建部 件 时 ， 我 们 和 希望 接收 哪些 依赖 。 
我 们 以 前 直接 使 用 Injector 类 , 但 在 写 部 件 时 , 我 们 通常 会 使 用 Angular 提 供 的 两 种 快捷 方式 。 
第 一 种 是 在 部 件 的 构造 函数 中 声明 这 些 可 注 和 对象。 这 也 是 最 典型 的 用 法 。 

要 做 到 这 一 点 ， 必 须 先导 入 该 服务 。 

















code/dependency_injection/simple/app/ts/app.ts 
/* 


* Services 
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*/ 


import { ApiService } from 'services/ApiService'; 
然后 在 构造 函数 中 声明 它 。 


code/dependency_injection/simple/app/ts/app.ts 





class DiSampleApp { 
constructor(private apiService: ApiService) { 


} 

当 我 们 在 组 件 的 构造 函数 中 声明 依赖 时 ，Angular 会 通过 反射 机 制 来 找 出 要 注入 的 类 。 也 就 
是 说 ，Angular 会 发 现 我 们 正在 构造 也 数 中 查找 一 个 ApiService 类 型 的 对 象 ， 并 检查 依赖 注入 系 
统 以 找 出 合适 的 可 注入 对 象 。 


有 时 我 们 需要 给 Angular 更 多 的 提示 ， 来 告诉 它 我 们 到 底 要 注入 什么 。 在 这 种 情况 下 ， 我 们 
要 使 用 第 二 种 方式 ， 即 @Inject 注 解 。 


class DiSampleApp { 
private apiService: ApiService; 
constructor(@Inject(ApiService) apiService) { 
this.apiService = apiService; 


} 
































如 果 我 们 要 用 这 种 等 价 形式 ， 可 以 打开 app.long.ts 文 件 ， 把 它 的 内 容 复 制 到 
app.ts Ho 
使 用 依赖 注入 的 最 后 一 步 是 把 部 件 想 要 的 东西 与 可 注入 对 和 象 关 联 起 来 。 换 句 话说 , 我们 告诉 
Angular: 当 部 件 声明 了 它 的 依赖 时 ， 应 该 注入 什么 
{ provide: ApiService, useClass: ApiService } 
在 这 个 例子 中 ， 我 们 使 用 令 牌 Apiservice 暴 露出 了 ApiService 类 的 单 例 对 象 。 
最 后 ， 我 们 把 这 个 ApiService 添 加 到 NgModule 的 providers 属 性 中 。 














code/dependency_injection/simple/app/ts/app.ts 


@NgModule( { 
declarations: [ DiSampleApp ], 
imports: [ BrowserModule ], 


bootstrap: [ DiSampleApp ], 
providers: [ ApiService ] // «-- here 


}) 
class DiSampleAppAppModule {} 


plat formBrowserDynamic( ) .bootstrapModule(DiSampleAppAppModule ) 
.catch((err: any) => console.error(err)); 
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8.8 ”使 用 注入 器 
我 们 已 经 和 注入 器 打 过 交道 了 ， 现 在 要 更 进一步 ， 看 看 什么 时 候 需 要 显 式 地 使 用 它们 。 
情况 之 一 是 ， 当 我 们 需要 控制 在 什么 时 机 创建 依赖 的 单 例 对 象 时 。 


为 了 说 明 什么 时 候 会 出 现 这 种 情况 ， 我 们 来 构建 另 一 个 应 用 。 除 了 使 用 我 们 以 前 创建 过 的 
ApiService 外 ， 它 还 会 用 到 一 个 新 的 服务 。 


该 服务 将 用 来 根据 浏览 器 的 窗口 大 小 实例 化 另外 两 个 服务 。 如 果 窗 口 宽度 小 于 800 像 素 ， 它 
就 返回 一 个 名 叫 SmallService 的 服务 实例 ; 否则 返回 LargeService 的 实例 。 


下 面 是 SmallService 的 代码 。 


code/dependency_injection/complex/app/ts/services/SmallService.ts 





















































export class SmallService { 
run(): void { 
console.log('Small service...'); 
j 
j 


下 面 是 LargeService 的 代码 。 


code/dependency_injection/complex/app/ts/services/LargeService.ts 




















export class LargeService { 
run(): void { 
console.log('Large service...'); 
} 
} 


然后 ， 我 们 开始 写 viewPortService， 它 负责 在 两 者 之 间作 出 选择 。 


code/dependency_injection/complex/app/ts/services/ViewPortService.ts 





import {LargeService} from './LargeService'; 
import {SmallService} from './SmallService'; 


export class ViewPortService { 
determineService(): any { 
let w: number = Math.max(document.documentElement.clientWidth, 
window. innerWidth || Q); 


if (w < 800) { 
return new SmallService(); 


} 


return new LargeService(); 
j 
j 


现在 ， 我 们 创建 一 个 使 用 这 些 服务 的 应 用 。 
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code/dependency_injection/complex/app/ts/app.ts 


class DiSampleApp { 
constructor(private apiService: ApiService, 
GInject('ApiServiceAlias') private aliasService: ApiService, 
GInject('SizeService') private sizeService: any) { 


} 

这 里 我 们 仍然 用 以 前 的 方式 获得 一 个 ApiService 的 实例 。 不 过 这 次 我 们 通过 别名 'Api- 
ServiceAlias ' 获 得 了 同一 个 实例 。 最 后 ， 我 们 要 获得 一 个 'SizeService ' 的 实例 ， 但 它 还 没有 
定义 过 。 

为 了 理解 每 个 服务 都 代表 什么 ， 我 们 来 看 看 NgModule。 


code/dependency_injection/complex/app/ts/app.ts 





@NgModule( { 

declarations: [ DiSampleApp ], 

imports: [ BrowserModule ], 

bootstrap: [ DiSampleApp ], 

providers: [ 
ApiService, 
ViewPortService, 
( provide: 'ApiServiceAlias', useExisting: ApiService ], 
{ 


provide: 'SizeService', 
useFactory: (viewport: any) => { 
return viewport.determineService(); 


he 


deps: [ViewPortService] 
} 
] 


}) 
class DiSampleAppAppModule {} 


这 段 代码 的 意思 是 , 我 们 首先 希望 该 应 用 的 注入 器 知道 ApiService 和 ViewPortService 这 两 
个 可 注入 对 象 。 

接 下 来 的 声明 表示 是 我 们 希望 通过 男 一 个 令 牌 (字符 串 ApiServiceAlias ) 来 使 用 既 有 服务 
ApiService. 

然后 ， 我 们 通过 另 一 个 字符 串 令 牌 SizeService 定 义 了 另 一 个 可 注 和 对象。 该 工厂 通过 把 
ViewPortService 列 在 自己 的 qdeps 数 组 中 ,表明 自己 需要 接收 该 服务 的 一 个 实例 。 然 后 ， 它 将 调 
用 该 实 例 的 determineService() 方法 ; 并 根 据 浏 览 ae AY $5 HE R [el — 7 SmallService 或 
LargeService 的 实例 。 

当 点 击 模板 中 的 一 个 按钮 时 ， 我 们 会 发 起 三 次 调用 : 一 次 是 对 ApiService ， 一 次 是 对 别名 
ApiServiceAlias ， 最 后 一 次 则 是 对 SizeService。 
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code/dependency_injection/complex/app/ts/app.ts 


invokeApi(): void { 
this.apiService.get(); 
this.aliasService.get(); 


this.sizeService.run(); 


) 
现在 , 如 果 我 们 运行 此 应 用 并 在 小 型 浏览 器 窗口 中 点 击 Invoke API 按 钮 , 结果 会 如 图 8-5 所 示 。 











eoe a ng-book 2: Angular 2 Dep- X | Felipe | 
= © CQ |[ localhost:8080 家 | 三 
Dependency Injection 
| Invoke API || Use Injectors | 
Elements Console Sources Network » os 











v U Preserve log 


RO 
© Ww <topframe> 
ApiService.ts:3 
ApiService.ts:3 


Getting resource... 
Getting resource... 
Small service... SmallService.ts:3 


> 








图 8-5 ADVE a Ba O 
条 来 自 ApiService ， 另 一 条 来 自 别 名 服务 ， 最 后 一 条 来 自 Smal1- 





我 们 会 获得 三 条 日 志 : 一 条 


Service. 
如 果 我 们 让 浏览 器 窗口 更 大 一 点 ， 刷 新 页 面 并 再 次 点 击 按钮 ， 结 果 会 如 图 8-6 所 示 。 
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eoe B ng-book2:Angular2Dep. x | — Felipe 
Œ | D localhost:8080 y 三 
Invoke API | Use Injectors 
Q O Elements Console Sources Network Timeline Profiles Resources Security Audits x 
© Ww <top frame> Y Preserve log 

Getting resource... ApiService.ts:3 
Getting resource... ApiService.ts:3 
LargeService.ts:3 


Large service... 


> 








图 8-6 ”大 型 浏览 器 窗口 


这 样 我 们 就 会 收 到 来 自 LargeService 的 日 志 。 然 而 ， 如 果 把 浏览 器 窗口 调 小 一 点 ， 不 刷新 


页 面 并 再 次 点 击 按钮 ， 收 到 的 仍 将 是 来 自 LargeService 的 日 志 ， 如 图 8-7 所 示 。 
这 是 因为 这 个 工厂 也 数 只 会 被 执行 一 次 ， 也 就 是 在 应 用 启动 时 。 


EA 


要 解决 这 个 问题 ， 我 们 可 以 创建 自己 的 注入 器 ， 并 通过 如 下 方式 获得 正确 的 服务 实例 。 






































code/dependency_injection/complex/app/ts/app.ts 


useInjectors(): void { 
let injector: any - 
ViewPortService, 


{ 


provide: 'OtherSizeService', 
useFactory: (viewport: any) => { 
return viewport.determineService(); 
Fr 
deps: [ViewPortService] 
} 
1); 


let sizeService: any = 
sizeService.run(); 


} 


ReflectiveInjector.resolveAndCreate( [ 


injector.get('OtherSizeService'); 
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图 8-7 “小 型 浏览 器 窗口 : 调整 大 小 后 

这 里 我 们 创建 了 一 个 注入 器 , 它 知道 ViewPortService 和 另 一 个 以 字符 串 otherSizeService 
为 令 牌 的 可 注入 对 象 。 这 个 可 注入 对 象 与 我 们 以 前 用 过 的 SizeService 使 用 同一 个 工厂 。 

最 后 ， 它 使 用 我 们 创建 的 注入 器 来 获得 一 个 otherSizeService 的 实例 。 

这 时 ， 如 果 我 们 在 一 个 大 型 浏览 器 窗口 中 运行 该 应 用 并 点 击 Use Injector 按 钮 ， 就 会 收 到 一 条 
来 自 LargeService 的 日 志 。 然 而 ， 如 果 我 们 把 窗口 调 小 ， 即 使 不 刷新 页 面 ， 也 能 正常 收 到 来 自 
SmallService 的 日 志 。 这 是 因为 现在 注入 器 是 随 需 创建 的 ， 我 们 每 次 点 击 按钮 时 都 会 重新 执行 
工厂 函数 。 这 真 漂亮 ! 




















8.9 替换 值 

使 用 依赖 注入 的 另 一 个 理由 是 在 运行 期 间 改 变 被 注入 对 象 的 硬 编码 值 。 当 我 们 用 一 个 API 服 
务 来 向 应 用 的 后 端 API 发 起 HTTP 请 求 时 ， 就 会 出 现 这 种 情况 。 在 单元 测试 或 集成 测试 的 场景 下 ， 
我 们 肯定 不 希望 代码 接触 生产 环境 的 数据 库 。 这 时 ， 就 可 以 写 一 个 Mock 的 API 服 务 ， 它 可 以 天 衣 
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无 颖 地 替换 掉 我 们 的 具体 实现 。 我 们 这 就 来 详细 解释 一 下 。 
比如 ， 如 果 在 开发 环境 下 运行 该 应 用 ， 我 们 可 能 会 接触 与 生产 环境 下 不 同 的 API 服 务 右 。 


当 我 们 发 布 一 个 开源 或 可 复 用 的 服务 时 ， 这 就 更 加 有 用 了 。 这 种 情况 下 ,我们 要 人 允许 调用 者 
定义 或 改写 API 的 URL。 


























我 们 来 写 一 个 简单 的 示例 应 用 ， 它 会 根据 自己 是 在 生产 模式 还 是 开发 模式 运行 来 为 API 的 
URL 注 入 不 同 的 值 。 先 从 ApiService 类 开始 。 


code/dependency_injection/value/app/ts/services/ApiService.ts 


import { Inject } from '@angular/core'; 
export const API_URL: string = 'API_URL'; 


export class ApiService { 


constructor(@Inject(API_URL) private apiUrl: string) { 
} 


get(): void { 
console.log(^Calling $[this.apiUrl]/endpoint...^); 


} 
} 


我 们 先 声 明了 一 个 常量 , 它 会 被 用 作 APIURL 依 赖 的 令 牌 。 换 句 话说 ,， Angular 会 根据 字符 串 


'API_URL' 来 存储 要 调用 哪个 URL 的 信息 。 这 样 ， 当 我 们 使 用 @Inject(API_URL) 时 ,就 会 把 正确 
的 值 注 入 到 apiur1 变 量 














注意 ， 我 们 还 同时 导出 了 API_URL 常 量 ， 这 样 客 户 方 应 用 就 可 以 从 服务 之 外 使 用 API_URL 来 
注入 正确 的 值 。 


现在 , 我 们 已 经 有 了 服务 , 接 下 来 写 一 个 应 用 组 件 , 它 将 使 用 该 服务 ,并 根据 所 在 的 运行 环 
境 为 URL 提 供 不 同 的 值 。 





code/dependency_injection/value/app/ts/app.ts 
@Component ( f 

selector: 'di-value-app', 

template: ^ 

«button (click)="invokeApi()">Invoke API«/button» 


}) 
class DiValueApp { 


constructor(private apiService: ApiService) { 


} 


invokeApi(): void { 
this.apiService.get(); 
} 
} 
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这 是 组 件 的 源 代码 。 在 构造 函数 中 ， 我 们 声明 了 一 一 个 ApiService 类 型 的 变量 apiService。 
a d M ag 断 出 我 们 需要 一 个 Apiservice 型 的 依赖 ， 并 在 运行 时 注入 它 。 如 果 我 们 要 


它 更 明确 一 点 ， 那 么 可 以 这 样 写 : 


constructor(@Inject(ApiService) private apiService: ApiService) { 


] 

该 组 件 有 一 个 Invoke API 按 钮 。 当 点 击 此 按钮 时 ， 我 们 调用 ApiService 的 get() 方 法 。 此 方 
法 就 会 把 我 们 正在 使 用 的 API_URL 的 值 记 录 到 控制 台中 。 

下 一 步 是 使 用 提供 者 来 配置 本 应 用 


code/dependency_injection/value/app/ts/app.ts 


const isProduction: boolean = false; 











@NgModule( { 
declarations: [ DiValueApp ], 
imports: [ BrowserModule ], 
bootstrap: [ DiValueApp ], 
providers: [ 
{ provide: ApiService, useClass: ApiService }, 
{ 
provide: API_URL, 
useValue: isProduction ? 
"https: //production—api.sample.com' 
"http: //dev-api.sample.com' 





} 
] 


}) 
class DiValueAppAppModule {} 


plat formBrowserDynamic( ).bootstrapModule(DiValueAppAppModule ) 

我 们 首先 声明 了 一 个 名 叫 isProduction 的 常量 ， 并 把 它 设置 为 false。 我 们 先 假装 做 了 点 什 
么 来 检测 自己 是 否 是 在 生产 模式 下 运行 。 这 里 可 以 先 反 它 硬 编码 进去 , 也 可 以 使 用 一 些小 技巧 来 
实现 它 ， 比 如 使 用 webpack 和 一 个 .env 文 件 。 

最 后 ， 我 们 引导 本 应 用 ， 并 设置 两 个 提供 者 : 一 个 用 真正 的 实现 类 来 提供 ApiService ， 另 
一 个 则 用 来 提供 API_URL 。 如 果 在 生产 模式 下 运行 ,我们 就 使 用 某 个 值 ， 和 否则 用 另 一 个 。 

要 测试 它 ， 我 们 可 以 带 上 isProduction = true 来 运行 本 应 用 。 然 后 点 击 该 按钮 ， 就 会 看 到 
日 志 中 记录 了 生产 模式 下 的 URL， 如 图 8-8 所 示 。 
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ApiService.ts:10 


Calling https://production-api.sample.com/endpoint... 


如 果 把 它 改 成 isProduction 


图 8-8 ”生产 环境 
false， 就 会 看 到 开发 模式 下 的 URL， 如 图 8-9 所 示 。 
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ApiService.ts:10 





图 8-9 开发 环境 
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8.10 NgModule 
NgModule 是 帮助 编译 器 和 依赖 注入 对 依赖 进行 组 织 的 方式 。 让 我 们 看 看 为 什么 需要 
NgModule 以 及 它们 是 如 何 工 作 的 。 


我 们 要 训 析 的 是 Angular 中 的 编译 器 和 依赖 注入 这 两 个 角色 。 简 而 言 之 ，Angulat 需 要 解决 组 
件 定义 了 哪些 HTML 标 记 (tag) 以 及 这 些 依赖 来 自 哪里 这 两 个 问题 。 





















































8.10.1 NgModule 与 JavaScript 模块 


你 可 能 会 疑惑 ， 为 什么 我 们 需要 一 个 新 的 模块 系统 呢 ? 只 用 ES6/TypeScript 的 模块 还 不 够 
吗 ? 

这 是 因为 虽然 仍然 要 用 import 来 把 代码 模块 加 载 到 JavaScript 环 境 中 ， 但 NgModule 体 系 却 是 
Angular 框 架 内 部 对 依赖 进行 组 织 的 一 种 方式 。 特 别 是 围绕 两 个 问题 .编译 出 了 哪些 标记 以 及 哪 
些 依赖 应 该 被 注入 其 中 。 




















8.10.2 ”编译 器 与 组 件 


对 于 编译 锅 来 说 ， 如 果 有 一 个 带 有 自 定 义 标记 的 Angular 横 板 ， 你 就 得 告诉 
是 有 效 的 〈 以 及 应 该 为 它们 附加 上 哪些 功能 )。 


比如 ， 假 设 你 有 这 样 一 个 组 件 : 


@Component ( f 
selector: 'hello-world', 
template: ^«div»Hello world«/div»^ 


}) 
class HelloWorld { 


} 


我 们 希望 编译 需 知 道 下 列 HITML 代 码 应 该 使 用 这 个 hello-wor1d 组 件 〈 这 个 hello-wor1d 可 
不 是 随便 写 的 无 效 标签 ): 


<div> 
«hello-world»«/hello-world» 
«/div» 


在 AngularJS 中 ，hello-wor1d 选 择 咒 应 该 已 经 在 全 局 范围 注册 过 了 。 在 你 的 应 用 成 长 到 发 
生命 名 冲突 之 前 ， 这 样 做 都 很 方便 。 比 如 ， 如 果 两 个 开源 项 目 使 用 了 相同 的 选择 器 ， 问 题 就 很 
难 解决 。 

如 有 果 你 用 过 Angular RC.5 之 前 的 老 版 本 ,可 能 还 记得 那些 版 本 需要 你 在 @Component 注 解 中 指 
定 一 个 directives 选 项 。 这 种 方式 的 优点 是 它 不 怎么 需要 “魔术 ”来 移 除 表面 的 冲突 。 它 的 问 
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题 在 于 要 为 每 个 组 件 指定 用 到 的 所 有 指令 ， 这 样 太 繁 珊 了 。 
改 用 NgModule ， 我 们 可 以 在 “模块 ”一 级 告诉 Angular 组 件 的 依赖 关系 。 我 们 会 在 稍 后 讲解 
更 多 内 容 。 




















8.10.3 ”依赖 注入 与 提供 者 
回忆 一 下 , 依赖 注入 是 一 种 让 依赖 在 整个 应 用 中 可 用 的 组 织 形式 。 它 对 简单 的 import 代 码 形 
式 进行 了 强化 ,让 我 们 得 以 用 一 种 标准 化 的 方式 来 共享 单 例 、 创 建 工 厂 以 及 在 测试 期 间 改写 依赖 。 


在 Angular RC.5 之 前 的 版 本 中 , 我 们 不 得 不 在 bootstrap 函 数 的 providers 参 数 中 指定 待 注 和 
的 一 切 〈 提 供 者 )。 
































回想 下 列 术 语 : 提供 者 提供 ( 创建、 实例 化 等 ) 你 想 要 的 可 注入 对 象 。 在 Angular 
中 ， 当 你 想 要 访问 可 注入 对 象 时 ， 就 把 一 个 依赖 注入 一 个 函数 中 。Angular 中 的 
依赖 注入 框架 就 会 找到 它 ， 并 把 它 提 供给 你 。 

现在 ， 利 用 NgModule ， 每 个 提供 者 都 被 指定 为 模块 的 一 部 分 。 

现在 你 应 该 明白 了 为 什么 需要 NgModule 以 及 要 怎样 使 用 它 了 吧 ? 这 里 是 最 简单 的 例子 : 





// app.ts 

@NgModule( { 
imports: [ BrowserModule ], 
declarations: [ HelloWorld ], 


bootstrap: [ HelloWorld ] 


}) 
class HelloWorldAppModule {} 


platformBrowserDynamic().bootstrapModule(HelloWorldAppModule); 

在 这 里 ， 我 们 定义 了 一 个 HelloWor1dAppModule 类 ， 随 后 将 其 作为 我 们 应 用 程序 的 入 口 点 。 
从 RC5 开 始 ， 不 再 使 用 组 件 来 引导 应 用 ， 而 是 改 用 bootstrapModule ， 就 像 这 里 的 代码 一 样 。 

NgModule 可 以 导入 其 他 模块 作为 自己 的 依赖 。 我 们 要 在 浏览 器 中 运行 此 应 用 , 所 以 还 要 导入 
BrowserModule。 

我 们 要 在 此 应 用 中 使 用 Hellowor1dq 组 件 。 记 住 这 里 的 关键 : 每 个 组 件 都 必须 在 某 些 NgModule 
中 声明 过 。 这 里 我 们 把 Hel lowor1d 放 在 了 NgModule 的 declarations 中 。 

我 们 说 Hellowor1d 组 件 从 属于 HelloworldAppModule ; 任何 组 件 都 只 能 从 属于 一 个 
NgModujle。 


我 们 通常 会 把 很 多 组 件 一 起 放 进 一 个 NgModule 中 ， 这 很 像 Java 中 的 package 或 C# 中 的 


namespace, 
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如 果 你 想 引 导 该 模块 (也 就 是 把 该 模块 作为 应 用 的 人 口 点 )， 那 么 就 得 提供 一 个 bootstrap 
届 性 ， 用 它 来 指定 一 个 作为 该 模块 入 口 点 的 组 件 。 

在 这 个 例子 中 ,你 将 会 bootstrap 这 个 HelloWor1d 组 件 ， 并 把 它 作 为 根 组件 。 不 过 ， 如 果 你 
创建 的 模块 不 需要 用 作 应 用 程序 入 口 点 ， 那 么 bootstrap 属 性 就 是 可 选 的。 














8.10.4 组 件 可 见 性 


要 使 用 任何 组 件 ， 当 前 的 NgModule 都 必须 先知 道 它 。 假 设 我 们 想 在 hello-wor1d 组 件 中 使 用 
user-greeting 组 件 ， 就 像 这 样 : 








<!-- hello-world template --» 

«div» 
«user-greeting»«/user-greeting» 
world 

«/div» 














如 果 任 何 组 件 想 要 使 用 其 他 组 件 , 它 必须 首先 通过 NgModule 体 系 获得 访问 权 。 有 两 种 方式 能 
做 到 这 一 点 : 


(1) user-greeting 组 件 位 于 同一 个 NgModule 中 ( 比如 HelloWor1ldAppModule ); 








(2) HelloWor1dAppModule 导 入 (imports ) 了 UserGreeting 组 件 所 在 的 模块 。 








假设 我 们 要 访问 第 二 个 路 由 。 下 面 是 UserGreetingModule 中 的 UserGreeting 组 件 的 实现 
代码 : 


@Component({ 
selector: 'user-greeting', 
template: ^«span»hello«/span»^ 
}) 


class UserGreeting { 

















} 

@NgModule( { 
declarations: [ UserGreeting ], 
exports: [ UserGreeting ] 


}) 


export class UserGreetingModule {} 

注意 ， 这 里 我 们 添加 了 一 个 新 的 属性 exports。 可 以 先 把 exports 当 作 这 个 NgModule 中 公开 
组 件 的 列表 。 这 里 隐 含 的 意思 是 ， 我 们 可 以 轻松 地 制作 一 个 私有 组 件 ， 只 要 别 把 它 列 进 exports 
中 就 行 了 。 

如 果 你 忘 了 把 组 件 加 到 qeclarations 和 exports 中 (然后 还 要 在 另 一 个 模块 中 通过 imports 
引入 本 模块 )， 那 么 组 件 将 不 会 生效 。 为 了 让 你 的 组 件 能 在 其 他 模块 中 通过 imports 的 方式 使 用 ， 
你 必须 把 组 件 同时 放 在 这 两 个 地 方 。 
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现在 , 只 要 把 它 导 入 到 Hellowor1ldAppModule 中 ,我 们 就 可 以 在 Hellowor1d 组 件 中 使 用 
就 像 这 样 : 


// updated HelloWorldAppModule 





@NgModule( { 
declarations: [ HelloWorld ], 
imports: [ BrowserModule, UserGreetingModule ], // «-- added 


bootstrap: [ HelloWorld ], 


}) 
class HelloWorldAppModule {} 


8.10.5 指定 提供 者 
只 要 把 可 注入 对 象 的 提供 者 添加 到 NgModule 的 providers 属 性 中 ， 就 算 完成 指定 了 。 
例如 ,假设 我 们 有 这 样 一 个 简单 的 服务 : 


export class ApiService { 
get(): void { 
console.log('Getting resource...'); 
} 
} 


我 们 希望 把 它 注入 到 组 件 中 ， 就 像 这 样 : 


class ApiDataComponent { 
constructor(private apiService: ApiService) { 


} 














getData(): void { 
this.apiService.get(); 
} 
} 





PETS 


用 NgModule 可 以 很 容易 做 到 这 一 点 : 只 要 把 ApiService 传 给 该 模块 的 providers 属 性 就 可 以 了 : 





@NgModule( { 
declarations: [ ApiDataComponent ], 
providers: [ ApiService ] // «— here 


}) 
class ApiAppModule {} 


这 里 直接 传人 ApiService 实 际 上 是 一 个 缩写 版 本 ， 使 用 provide 的 完整 版 本 是 这 样 的 : 


@NgModule( { 
declarations: [ ApiDataComponent ], 
providers: [ 
provide(ApiService, { useClass: ApiService }) 
] 


}) 
class ApiAppModule {} 
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我 们 是 在 告诉 Angular， 当 ApiService 被 注 和 人 时， 依赖 注入 体系 要 负责 创建 、 维 护 该 类 的 单 
例 ， 并 把 它 传 进去 。 


要 从 其 他 模块 中 使 用 这 些 提供 考 ， 必 须 先 导入 (import ) 那个 模块 。 


由 于 ApiDataComponent 和 ApiService 都 位 于 同一 个 NgModule 中 , ApiDataComponent 可 以 直 
接 注 入 ApiService。 否 则 ， 就 需要 把 包含 ApiService 的 模块 导入 到 ApiAppModule 中 。 

















8.11 总 结 
可 以 看 出 , 依赖 注入 和 NgModule 的 协作 为 管理 应 用 中 的 依赖 提供 了 一 种 强大 的 方式 。 要 了 解 
更 多 知识 ， 请 参考 下 列 资源 : 


口 Angular DI 官 方 文 档 " 
O Victor Savkin 对 AngularJS 中 和 Angular 中 依赖 注入 的 对 比 ? 














(D https://angular.io/docs/ts/latest/guide/dependency-injection.html 
@ http://victorsavkin.com/post/126514197956/dependency-injection-in-angular-1-and-angular-2 
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数据 架构 概览 


管理 数据 可 以 说 是 编写 可 维护 应 用 最 环 手 的 方面 之 一 。 有 很 多 种 方法 可 以 将 数据 应 用 到 你 的 
应 用 之 中 : 
O AJAX HTTP 请 求 
口 Websocket 
口 Indexdb 
口 LocalStorage 





口 LocalStorage 

O Service Worker 

O 等 等 

数据 架构 涉及 的 问题 如 下 。 

口 如 何 将 所 有 不 同 的 数据 源 聚 合成 一 个 完整 的 体系 ? 

口 如 何 防止 意 想不到 的 副作用 导致 bug? 

口 如 何 更 好 地 构建 代码 以 使 其 更 容易 维护 并 让 新 来 的 团队 成 员 更 容易 上 手 ? 
口 当 数 据 发 生变 化 时 ， 如 何 让 应 用 尽快 作出 反应 ? 

多 年 以 来 ，MVC 一 直 是 构建 数据 应 用 的 标准 模式 : 模型 包含 业务 逻辑 ， 视 图 负责 显示 数据 ， 
控制 器 将 所 有 一 切 联系 在 一 起 。 不 过 问题 是 ， 我 们 知道 MVC 模 式 并 不 能 很 好 地 直接 转化 到 客户 
端的 网 络 应 用 中 。 

目前 ， 数 据 架 构 领 域 出 现 了 复兴 并 有 许多 新 理念 涌现 出 来 。 


口 MVW/ 双 向 数据 绑 定 : Model-View-Whatever" 是 用 来 形容 AngularJS 中 上 默认 架构 的 一 个 术 
语 。$scope 提 供 数 据 双向 绑 定 ， 整 个 应 用 都 共用 同样 的 数据 结构 ， 某 个 区 域 的 一 个 变化 






























































(D https://plus.google.com/+AngularJS/posts/aZNVhj355G2 
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会 传达 至 该 应 用 的 其 余部 分 。 

O Flux”: 它 使 用 单 向 数据 流 。 在 Flux 中 ，Store 负 责 存 储 数据 ,， View 负责 泻 染 Store 中 的 数据 ， 
Action 负 责 改 变 Store 中 的 数据 。 虽 然 设置 Flux 有 一 点 繁琐 ,但 是 因为 数据 只 在 一 个 方向 上 
流动 ， 所 以 很 容易 推 新 。 

O 可 观察 对 象 : observable 给 我 们 提供 了 数据 流 。 我 们 订阅 数据 流 然后 执行 操作 对 变化 作出 
反应 。RxJS? 是 当下 最 流行 的 响应 式 JavaScript 库 ， 给 我 们 提供 了 强 有 力 的 操作 符 , 用 来 在 
数据 流 上 组 合 一 系列 操作 。 





























e 还 有 很 多 关于 这 些 理念 的 变种 ， 例 如 ; 

Flux 作 为 一 种 模式 而 并 非 具 体 实 现 ， 它 有 许多 不 同 的 实现 方案 ( 就 像 MVC 有 许 
多 的 实现 方案 一 样 ); 
e Immutability 是 以 上 所 有 数据 架构 的 一 个 常见 变 
e Falcors 是 一 个 强大 的 框架 ， 可 以 帮 你 将 客户 端 模型 和 服务 端 数据 进行 绑 定 。 
e Falcor 通 常 使 用 可 观察 对 象 类 型 的 数据 架构 。 


Angular 数据 架构 

Angular 在 数据 架构 的 选择 上 极其 灵活 。 一 种 数据 策略 在 一 个 项 目 中 可 行 并 不 代表 在 另 一 个 
项 目 中 也 可 行 ， 所 以 Angular 并 未 规定 具体 的 技术 栈 ， 而 是 力图 让 你 无 论 选 择 何 种 数据 架构 都 能 
很 容易 使 用 ( 同时 保持 高 性 能 )。 

这 样 的 好 处 是 ， 你 可 以 拥有 足够 的 灵活 性 来 让 Angulat 适 应 几乎 任何 情况 。 只 是 有 一 点 不 太 
好 : 你 将 不 得 不 自己 选择 适合 项 目的 数据 架构 。 

别 担心 ,我 们 不 会 让 你 自己 去 作出 这 个 艰难 的 决定 ! 在 接 下 来 的 几 章 里 , 我 们 将 教 你 如 何 使 
用 这 里 提 到 的 某 些 模式 来 构建 应 用 。 



































(D https://facebook.github.io/flux/ 
@ https://github.com/Reactive-Extensions/RxJS 
®© http://netflix.github.io/falcor/ 
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10.1 可 观察 对 象 和 RxJS 


在 Angular 中 ， 可 以 使 用 可 观察 对 象 作为 数据 架构 的 骨架 来 构建 应 用 。 使 用 可 观察 对 象 构造 
数据 被 称 为 响应 式 编程 ( reactive programming )。 

可 观察 对 象 和 响应 式 编程 究竟 是 什么 呢 ?” 响 应 式 编程 是 一 种 处 理 异步 数据 流 的 编程 方法 。 可 
观察 对 象 是 用 来 实现 啊 应 式 编 程 的 主要 数据 结构 。 必 须 承 认 ， 这 些 术 语 可 能 不 怎么 明确 。 因 此 ， 
我 们 会 在 本 章 通过 具体 的 例子 来 帮助 你 更 好 地 理解 这 些 概念 。 

































































10.1.1 注意 : 一 些 必 备 的 RxJS 相关 知识 


需要 指出 的 是 , 本 书 的 重点 不 是 讲解 响应 式 编 程 。 有 一 些 其 他 不 错 的 资源 可 以 教会 你 响应 式 
编程 的 基础 ， 你 应 该 阅读 它们 。 我 们 在 下 面 列举 了 儿 个 。 


你 可 以 将 本 章 视 为 如 何 使 用 RxJSB 和 Angular 的 入 门 教程 ， 而 不 是 RxJS 和 响应 式 编程 的 详细 



























































本 章 会 详细 解释 我 们 接触 到 的 RxJS 概 念 和 API, 但 如 果 RxJS 对 你 来 说 还 是 个 新 鲜 事 物 ， 那么 
你 可 能 需要 通过 其 他 相关 资源 来 补充 知识 。 


o 本 章 使 用 Underscore.js 
Underscore.js 是 一 个 流行 的 类 库 ， 为 Array 和 0bject 这 样 的 JavaScript 数 据 结 构 
提供 函数 式 操作 符 。 本 章 将 在 使 用 RxJS 的 同时 大 量 使 用 它 。 如 果 在 代码 中 看 见 
了 _， 比 如 _.map 或 者 _.sortBy ， 要 知道 这 就 是 在 使 用 Underscore.js 类 库 。 要 查 
阅 Underscore.js 文 档 ， 请 阅读 http://underscorejs.org/。 





(D http://underscorejs.org/ 
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10.1.2 学习 响 应 式 编程 和 RxJS 
如 果 你 只 想 学 习 RxJS， 推 荐 阅读 这 篇 文章 。 
O Andre Staltz 的 “你 不 容错 过 的 响应 式 编程 人 门 ”( https://gist.github.com/staltz/868e7 
e9bc2a7b8c1f754 ) 
在 你 了 解 一 些 RxJS 背 后 的 概念 之 后 ， 下 面 的 链接 可 以 帮 你 在 前 进 的 道路 上 走 得 更 远 。 


口 “哪些 静态 操作 符 可 以 用 来 创建 流 ? ”( https://github.com/Reactive-Extensions/RxJS/blob/ 
master/doc/gettingstarted/which-static.md ) 

口 “哪些 实例 操作 符 可 以 在 流 上 使 用 ? " (https//github.com/Reactive-Extensions/RxJS/blob/ 
master/doc/gettingstarted/which-instance.md ) 

O RxMarbles: 各 种 流 操作 的 交互 式 图 解 ( http://staltz.com/rxmarbles ) 


本 章 由 始 至 终 都 会 提供 RxJS 的 API 文 档 链接 。RxJS 文 档 有 大 量 很 棒 的 示例 代码 ， 阐 明了 不 同 
的 流 和 操作 符 是 如 何 工 作 的 。 


















































Angular 必 须要 用 RxJS 吗 ? 
不 ， 完 全 不 必 。 可 观察 对 象 只 是 Angular 众 多 数据 模式 中 的 一 种 。 想 了 解 其 他 数 
据 模 式 ， 请 参见 第 9 章 。 





我 想 给 你 提 个 醒 : 起 初学 习 RxJS 时 会 有 一 些 烧 脑 。 但 是 相信 我 , 你 终 将 掌握 它 的 要 领 , 并 且 
这 些 付 出 都 是 值得 的 。 下 面 是 一 些 关 于 流 的 重要 概念 ， 会 对 你 有 所 帮助 。 


(1) 承诺 ( promise ) 发 出 单个 值 ， 而 流 发 出 多 个 值 。 在 应 用 中 , 流 扮演 着 和 承诺 一 样 的 角色 。 
如 有 果 你 是 从 回调 函数 转 为 承诺 的 话 , 会 发 现 相 对 于 回调 函数 ,承诺 在 可 读 性 和 数据 可 维护 性 方面 
都 有 了 很 大 的 改进 。 同 样 ， 流 也 改进 了 承诺 ， 可 以 在 流 上 持续 响应 数据 的 变化 〈 与 此 相反 ， 承 诺 
是 一 次 性 解决 )。 


(2) 命令 式 代码 “ 拉 取 ”数据 ， 而 响应 式 流 “ 推 送 ” 数 据 。 在 响应 式 编程 中 ， 代 码 订 阅 了 数 
据 变 化 时 接收 通知 ， 流 会 把 数据 “推送 ”给 这 些 订阅 者 。 

(3) RxJS 是 函数 式 的 。 如 果 你 热衷 于 像 nap 、reduce 和 filter 这 样 的 函数 式 操 作 符 ， 那 么 使 
用 RxJS 时 会 感到 很 轻松 ; 因为 在 某 种 意义 上 讲 ， 数 据 集合 和 强大 的 函数 操作 符 同样 适用 于 流 。 

(4) 流 是 可 组 合 的 。 可 以 把 流 想 象 成 一 个 贯穿 数据 的 操作 管道 。 你 可 以 订阅 流 中 的 任何 部 分 ， 
甚至 可 以 组 合 它们 来 创建 新 的 流 。 
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10.2 ”聊天 应 用 概览 


在 本 章 中 ， 我 们 将 使 用 RxJS 构 建 聊 天 应 用 。 界 面 截图 如 图 10-1 所 示 。 





eoe 


[ Angular 2 - Chat with RxJS x 





Blank 





€ CŒ | D localhost:8080 





ng-book 2 


Echo Bot + 
I'll echo whatever you send me 
Reverse Bot 
cdi Ili reverse whatever you send me 
Waiting Bot 
Ml wait however many seconds you send to me before responding. Try sending '3' 


Lady Capulet 
So shall you feel the loss, but not the friend which you weep for. 


Wi Chat - Echo Bot 


I'll echo whatever you n 
send me 


图 10-1 ”完成 后 的 聊天 应 用 


e 我 们 通常 会 尝试 在 书 中 展现 每 一 行 代码 。 不 过 这 个 聊天 应 用 有 大 量 的 活动 部 件 ， 
所 以 本 章 不 会 展现 所 有 代码 。 


可 以 在 文件 夹 code/rxjs/chat 中 找到 本 章 的 示例 代码 。 在 适当 的 时 候 , 我 们 会 告诉 
你 在 哪里 可 以 找到 你 想 要 查看 的 内 容 。 


本 应 用 提供 了 几 个 机 器 人 ， 你 可 以 和 它们 聊天 。 先 运行 这 些 代码 看 看 : 


cd code/rxjs/chat 
npm install 
npm run go 


AXE CED US ast PFT FF http: //localhost:8080 





如 果 上 面 的 链接 无 法 打开 ， 请 尝试 这 个 链接 : http://localhost:8080/webpack-dev- 
Serverindex.html。 
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T 一 些 Windows 用 户 在 这 个 目录 下 运行 npm install 时 可 能 会 遇 到 问题 。 如 果 遇 到 
了 ， 请 先 确 保 自己 是 在 Cygwin" 中 运行 这 些 命令 行 。 


你 在 本 应 用 中 要 注意 以 下 几 点 : 


a 你 可 以 点 击 会 话 (thread ) 和 一 个 机 器 人 聊天 ; 
O 机 器 人 会 根据 各 自 的 性 格 来 回复 你 的 消息 ; 

口 右上 角 的 未 读 消息 总 数 会 自动 同步 。 

下 面 来 看 看 本 应 用 是 如 何 构造 的 。 我 们 有 : 


口 三 个 顶层 Angular 组 件 
口 三 个 数据 模型 

















口 三 个 服务 
让 我 们 来 逐个 看 看 。 


10.2.1 组 件 








将 页 面 分 解 成 三 个 顶层 组 件 ， 如 图 10-2 所 示 。 


@ © / [M Angular 2- Chat with Rxus x 














| Blank | 
€ > Q' [localhost:8080 gel = 


Echo Bot + 


lecho wher you sand ii ChatThreads 





Reverse Bot 


l'Il reverse whatever you send me 


[1] Waiting Bot 


IIl wait however many seconds you send to me before responding. Try sending ‘3' 


Lady Capulet 
So shall you feel the loss, but not the friend which you weep for. 





ChatWindow 


Wi Chat - Echo Bot 
"eo whatever you n 








图 10-2 ”聊天 应 用 的 顶层 组 件 














(D https:/Awww.cygwin.com/ 
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O ChatNavBar: 包含 未 读 消息 数 。 
口 ChatThreads : 展示 一 个 可 点 击 的 会 话 列表 ， 每 个 会 话 都 包含 最 新 消息 和 会 话 头像 。 
O ChatWindow: 展示 当前 会 话 的 消息 和 一 个 用 来 发 送 新 消息 的 输入 框 。 








10.2.2 ”数据 模型 


本 应 用 同样 包含 三 个 数据 模型 ， 如 图 10-3 所 示 。 

Q User: 存储 聊天 参与 者 的 相关 信息 。 

D Message: 存储 一 条 单独 的 信息 。 

O Thread: 存储 一 组 消息 的 集合 以 及 一 些 与 这 次 会 话 有 关 的 其 他 数据 。 








i 


User 


lastMessage 一 | 





m— 
lastMessage thread 








图 10-3 ”聊天 应 用 的 数据 模型 


10.2.3 ”服务 




















在 本 应 用 中 ， 每 个 数据 模型 都 有 其 对 应 的 服务 。 服 务 都 是 单 例 对 象 ， 有 以 下 两 个 作用 : 
(1) 提供 应 用 可 以 订阅 的 数据 流 ; 

(2) 提供 操作 符 来 添加 或 更 改 数据 。 

比如 ，UserService: 


a 发 布 一 个 流 用 来 通知 当前 用 户 ; 
O 提供 一 个 setCurrentUser pA, 用 于 设置 当前 用 户 ( 即 从 currentUser 流 发 出 当前 用 户 )。 








10.2.4 总 结 
大 体 上 来 说 ， 本 应 用 的 数据 架构 很 简明 : 


口 服务 负责 维护 流 ， 而 流 负责 发 出 数据 模型 ( 例如 Message ); 
a 组 件 订 阅 这 些 流 并 按照 最 新 的 值 进 行 演 染 。 


比如 ，ChatThreads 组 件 订 阅 ThreadService 中 的 流 来 获取 最 新 的 会 话 列 表 ， 而 ChatWindow 
组 件 订阅 ThreadService 中 的 流 来 获取 最 新 的 消息 列表 。 
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本 章 其 余部 分 将 深入 探讨 如 何 使 用 Angular 和 RxJS 来 实现 此 应 用 。 我 们 首先 实现 数据 模型 ， 
然后 看 看 如 何 创 建 服务 来 管理 流 ， 最 后 实现 组 件 。 





10.3 ”实现 数据 模型 
我 们 先 从 简单 的 部 分 开始 ， 看 看 数据 模型 。 





10.3.1 User 





User 类 很 简明 ， 有 idqd、name 和 avatarSrc 三 个 属性 。 





code/rxjs/chat/app/ts/models.ts 
export class User { 


id: string; 


constructor(public name: string, 
public avatarSrc: string) { 
this.id = uuid(); 
j 
j 


O 注意 上 面 的 代码 ， 我 们 在 构造 函数 中 使 用 了 TypeScript 的 简写 方式 。 当 指明 


public name: string 时 ， 我 们 是 在 告诉 TypeScript: (1) 将 name 作 为 类 的 一 个 
公有 属性 ; (2) 当 创 建 一 个 新 的 实例 时 ， 把 参数 的 值 赋 给 这 个 属性 。 


10.3.2 Thread 

















同样 ，Thread 也 是 一 个 简单 的 TypeScript 类 。 


code/rxjs/chat/app/ts/models.ts 


export class Thread { 
id: string; 
lastMessage: Message; 
name: string; 
avatarSrc: string; 


constructor(id?: string, 
name?: string, 
avatarSrc?: string) ( 
this.id - id || uuid(); 
this.name - name; 
this.avatarSre = avatarSrc; 
j 
j 
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注意 ,我 们 在 Thread 类 中 保存 了 一 个 lastMessage 的 引用 。 这 可 以 使 我 们 在 会 话 列表 中 显示 
最 新 消息 。 


10.3.3 Message 








同样 ， Message 也 是 个 简单 的 TypeScript 类 ， 但 是 这 里 使 用 了 一 个 形式 略微 不 同 的 构造 函数 。 
code/rxjs/chat/app/ts/models.ts 
lastMessage: Message; 
构造 函数 中 的 这 种 模式 允许 我 们 使 用 构造 函数 中 的 关键 字 参 数 进 行 模拟 。 使 用 这 种 模式 ,可 
以 使 用 任意 的 数据 来 创建 一 个 新 的 Message ， 而 且 不 用 担心 参数 的 顺序 问题 。 比 如 ， 我 们 可 以 这 
样 做 : 


let msgi = new Message(); 

















# or this 


let msg2 = new Message( { 
text: "Hello Nate Murray!" 


}) 
看 完了 数据 模型 ， 我 们 再 来 看 看 第 一 个 服务 : UserService. 








10.4 ŒF UserService 





UserService 的 意义 在 于 提供 这 样 一 个 场所 : 应 用 可 以 在 这 里 了 解 到 当前 用 户 信息 ， 并 在 当 
前 用 户 发 生变 化 时 通知 应 用 的 其 他 部 件 。 


我 们 要 做 的 第 一 件 事 是 创建 一 个 TypeScript 类 ， 并 为 它 加 上 @Injectable 注 解 。™ 





code/rxjs/chat/app/ts/services/UserService.ts 


export class UserService { 
// ~currentUser~ contains the current user 
currentUser: Subject<User> = new BehaviorSubject«User»(null); 


public setCurrentUser(newUser: User): void { 
this.currentUser.next(newUser); 
j 
j 





























注意 ,@Injectable 注 解 表示 该 类 可 以 让 Angular 把 其 他 服务 注入 进来 ， 也 就 是 说 以 该 类 作为 目标 。 因 此 在 创建 
服务 时 ，@Injectable 注 解 并 不 是 必需 的 ， 但 官方 的 风格 指南 明确 建议 我 们 加 上 它 。 一 一 译 者 注 
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我 们 说 这 个 服务 是 可 注入 的 ， 意 思 是 可 以 把 它 注入 到 应 用 中 的 其 他 组 件 中 。 简 
要 来 说 ， 依 赖 注入 有 两 大 优点 
(1) 让 Angular 来 管理 对 象 的 生命 周期 ， 
(2) 测试 组 件 时 更 容易 。 
我 们 在 第 8 章 中 深入 讨论 了 它 。 如 果 你 还 没有 阅读 第 8 章 ， 现 在 只 需要 知道 可 以 
把 它 注 入 到 我 们 的 组 件 中 就 可 以 了 ， 代 码 如 下 

class MyComponent { 


constructor(public userService: UserService) { 
// do something with ^userService^ here 


j 
} 


10.4.1 currentUser Fi 


接 下 来 设置 一 个 流 ， 用 来 管理 当前 用 户 。 








code/rxjs/chat/app/ts/services/UserService.ts 


currentUser: Subject<User> = new BehaviorSubject«User»(null); 


这 里 发 生 了 很 多 事 ， 我 们 来 逐一 分 解 : 





口 定义 了 实例 变量 currentUser ， 它 是 一 个 Subject 流 ; 
口 更 准确 地 说 ，currentUser 是 一 个 包含 user 的 BehaviorSub ject ; 
a 然而 ， 这 个 流 的 初始 值 是 nul1 ( 构造 函数 参数 )。 














如 果 你 没 怎么 用 过 RxJS 的 话 ， 那 么 可 能 不 知道 Subject 和 BehaviorSub ject 是 什么 。 你 可 以 
把 Subject 当 作 一 个 “ 读 / 写 ” 流 。 


e 从 技术 上 来 说 ，Subject" 同 时 了 继承 Observable” 和 Observer®。 


ne bi eee ere 是 流 的 一 个 副作用 ， 
而 BehaviourSubject 弥 补 了 这 


一 点 。 





p 





BehaviourSubject "有 一 个 特殊 的 属性 ， 用 来 存储 最 新 的 值 。 这 意味 着 任何 流 的 订阅 者 都 会 
接收 最 新 的 值 。 这 对 于 我 们 来 说 好 极 了 ， 因 为 这 意味 着 应 用 的 任何 部 分 都 可 以 订阅 
UserService.currentUser 流 并 且 可 以 立即 知道 当前 用 户 是 谁 


Lo 























(D https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/subjects/subject.md 

@ https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/observable.md 

®© https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/observer.md 

@ https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/subjects/behaviorsubject.md 
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10.4.2 ”设置 新 用 户 


当前 用 户 改 变 时 ( 例如 登录 )， 我 们 需要 一 个 途径 将 新 用 户 发 布 到 流 中 。 
有 两 种 暴露 API 的 方法 可 以 做 到 这 件 事 。 
1. 直接 将 新 用 户 添加 到 流 


更 新 当前 用 户 的 最 直接 方法 就 是 使 用 userService 的 实例 直接 发 布 一 个 新 的 user 对 象 到 流 
如 下 所 示 。 
userService.subscribe((newUser) => { 


console.log('New User is: ', newUser.name); 


}) 





























// => New User is: originalUserName 


let u = new User('Nate', 'anImgSrc'); 
userService.currentUser.next(u); 


// => New User is: Nate 


e 注意 ， 这 里 使 用 了 Subject 的 next 方 法 来 推送 一 个 新 值 到 流 中 。 





这 种 做 法 的 好 处 是 可 以 复 用 流 中 现 有 的 API， 不 需要 引入 任何 新 的 代码 或 者 API。 
2. 创建 setCurrentUser(newUser: User) 方 法 
另 一 种 更 新 当前 用 户 的 方法 是 在 UserService 上 创建 一 个 辅助 方法 ， 如 下 所 示 。 























code/rxjs/chat/app/ts/services/UserService.ts 


public setCurrentUser(newUser: User): void { 
this.currentUser.next(newUser); 


] 
你 会 注意 到 我 们 仍然 在 使 用 currentUser 流 的 next 方 法 。 为 何 还 要 这 样 做 呢 ? 
这 样 做 的 价值 在 于 ，currentUser 的 实现 与 流 的 实现 进行 了 解 而。 通过 把 next 方 法 包 焉 在 





























setCurrentUser 方 法 里 ， 我 们 有 一 定 的 空间 来 更 改 UserService 的 实现 而 不 至 于 破坏 实例 。 





在 这 个 例子 中 , 我 不 会 强烈 推荐 其 中 某 一 种 方法 , 但 两 种 方法 在 大 型 项 目 中 的 可 维护 性 上 还 

















是 有 显著 区 别 的 。 


o 第 三 种 选项 是 把 这 些 更 改 暴露 为 它们 自己 的 流 (也 就 是 说 我 们 把 更 改 当 前 用 户 
的 这 个 “动作 ” 放 进 流 中 )。 我 们 会 在 下 面 的 MessagesService 中 探讨 这 种 模式 。 
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10.4.3 UserService.ts 














把 所 有 代码 整合 起 来 ， 可 以 得 到 userService 的 完整 代码 。 


code/rxjs/chat/app/ts/services/UserService.ts 


import {Injectable} from '@angular/core'; 
import {Subject, BehaviorSubject} from 'rxjs'; 


import {User} from '../models'; 

/** 

* UserService manages our current user 
*/ 

@Injectable() 


export class UserService { 
// ^currentUser^ contains the current user 
currentUser: Subject<User> = new BehaviorSubject«User»(null); 


public setCurrentUser(newUser: User): void { 
this.currentUser .next(newUser ) ; 


} 
} 


export var userServiceInjectables: Array<any> = [ 
UserService 


li; 


10.5 MessagesService 





MessagesService 是 这 个 应 用 的 支柱 。 此 应 用 中 的 所 有 消息 都 要 流 经 MessagesService。 
相 比 于 UserService，MessagesService 包 含 一 些 更 复杂 的 流 ， 它 由 五 个 流 组 成 : 三 个 数据 
管理 流 和 两 个 动作 流 。 
三 个 数据 管理 流 分 别 是 : 
口 newMessages ， 发 出 每 条 新 Message 并 且 每 条 只 发 出 一 次 ; 
口 messages， 发 出 一 组 当前 的 Messages ; 
口 updates ， 在 messages 流 上 执行 操作 。 




















10.5.1 newMessages 流 





newMessages 是 一 个 Subject ， 用 来 发 出 每 条 新 Message 并 且 每 条 只 发 出 一 次 。 





code/rxjs/chat/app/ts/services/MessagesService.ts 


export class MessagesService { 
// a stream that publishes new messages only once 
newMessages: Subject«Message» = new Subject«Message»(); 
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我 们 还 可 以 定义 一 个 辅助 方法 来 添加 Message 到 这 个 流 中 。 


code/rxjs/chat/app/ts/services/MessagesService.ts 


addMessage(message: Message): void { 
this .newMessages .next(message) ; 


] 
有 这 样 的 一 个 流 还 是 很 有 帮助 的 ， 它 可 以 从 一 个 会 话 中 获取 不 属于 某 个 特殊 用 户 的 所 有 消 
息 。 以 回声 机 器 人 (Echo Bot) 为 例 ， 如 图 10-4 所 示 。 


% Chat - Echo Bot 
I'll echo whatever you send me 5m 


e Stop copying me 


or 


Stop copying me m 


Write your message here Eg 


图 10-4 回声 机 器 人 

当 实 现 回 声 机 器 人 时 ， 我 们 不 想 进 入 一 个 重复 机 器 人 本 身 消息 的 死 循环 。 

要 实现 这 一 点 ， 我 们 可 以 订阅 newMessages 流 并 根据 下 面 的 条 件 过 滤 所 有 消息 

(1) 是 这 个 会 话 的 一 部 分 ; 

(2) 不 是 机 需 人 产生 的 。 

你 可 以 这 样 理解 ， 对 于 一 个 给 定 的 Thread， 我 们 想 要 一 个 不 包含 这 个 User 的 消息 流 。 
































code/rxjs/chat/app/ts/services/MessagesService.ts 


messagesForThreadUser(thread: Thread, user: User): Observable«Message» { 
return this.newMessages 
.filter((message: Message) => { 
// belongs to this thread 


return (message.thread.id === thread.id) && 
// and isn't authored by this user 
(message.author.id !== user.id); 


}); 
} 


messagesFor ThreadUser 1Z Ift — Thread X} & ftl — 4 User 对象 并 返回 一 个 经 过 筛选 的 新 
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Message 流 。 筛 选 条 件 是 消息 属于 这 个 Thread ， 而 且 不 是 由 这 个 user 写 的 。 也 就 是 说 ， 这 是 一 
在 此 Thread 中 的 其 他 人 的 消息 流 。 











10.5.2 messages 流 


newMessages 流 发 出 单个 的 Message 对 象 ， 而 messages 流 发 出 一 组 最 新 的 Message 对 象 。 


code/rxjs/chat/app/ts/services/MessagesService.ts 
messages: Observable«Message[]»; 


X Æ Message[] FT Array«Message» o A — ft F Wih | ik X Observable 


«Array«Message»», 3i 3 messages ifi ty X Æ A Observable<Message[]> AT, 
表示 这 个 流 发 出 的 是 一 个 数组 (Message 对 象 的 数组 ), 而 不 是 单个 的 Messages。 





那么 messages 是 如 何 填充 的 呢 ? 为 此 我 们 需要 讨论 updates 流 和 一 种 新 的 模式 : 操作 流 。 


10.5.3 ”操作 流 模 式 


下 面 是 操作 流 模式 的 基本 理念 : 


O 在 messages 流 中 维护 状态 ， 它 会 保存 一 个 最 新 的 Message 数 组 ; 
口 使 用 一 个 updates 流 ， 即 应 用 于 messages 流 的 函数 流 。 


你 可 以 这 样 理 解 : 任何 updates 流 上 的 函数 都 会 更 改 当 前 的 消息 列表 。updates 流 上 的 函 


应 该 接收 一 个 Message 对 象 列 表 然 后 返回 一 个 Message 对 象 列 表 。 让 我 们 在 代码 中 通过 a. 
接口 来 使 这 个 概念 形式 化 。 


code/rxjs/chat/app/ts/services/MessagesService.ts 


interface IMessagesOperation extends Function { 
(messages: Message[]): Message[]; 


] 
下 面 来 定义 updates 流 。 


code/rxjs/chat/app/ts/services/MessagesService.ts 


// ~updates~ receives _operations_ to be applied to our ~messages~ 
// it's a way we can perform changes on xall« messages (that are currently 


// stored in ^messages') 
updates: Subject«any» - new Subject«any»(); 


记 住 ，updates 流 接收 用 来 应 用 到 消息 列表 的 操作 。 但 是 如 何 把 这 些 关联 起 来 呢 ? 实现 方法 
如 下 ( TEMessagesServicellconstructor P Jo 
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code/rxjs/chat/app/ts/services/MessagesService.ts 


constructor() { 
this.messages = this.updates 
// watch the updates and accumulate operations on the messages 
.scan((messages: Message[], 
operation: IMessagesOperation) => { 
return operation(messages) ; 
), 
initialMessages) 
// make sure we can share the most recent list of messages across anyone 


这 段 代码 引入 了 新 的 流 函 数 : scan”。 如 果 你 熟悉 函数 式 编程 的 话 ，scan 很 像 reduce : EH 
输入 流 中 的 每 个 元 素 运 行 函数 并 累加 出 一 个 值 。scan 的 特别 之 处 在 于 , 它 会 把 每 个 中 间 过 程 中 计 
算出 的 结果 值 发 送出 去 。 也 就 是 说 , 它 不 会 等 到 流 全 部 完成 后 再 发 送 结果 值 ; 这 正 是 我 们 想 要 的 。 


当 调 用 this.updates.scan 时 ， 我 们 会 创建 一 个 新 的 流 。 这 个 流 订 阅 了 updates 流 。scan 内 
部 执行 的 每 一 次 ， 我 们 都 会 得 到 : 


(1) 经 过 累加 的 messages 流 ; 
(2) 将 要 应 用 的 新 operation。 
然后 返回 新 的 Message[] 。 
























































关于 流 ， 你 需要 知道 的 一 点 是 它们 默认 是 不 可 共享 的 。 也 就 是 说 ， 如 果 一 个 订阅 者 从 流 中 读 
取 了 一 个 值 ， 读 完 后 这 个 值 就 永远 消失 了 。 在 这 个 例子 中 ， 我 们 想 : (1) 在 一 些 订阅 者 之 间 共 享 
同样 的 流 ; (2) 为 任何 未 来 的 订阅 者 重播 最 新 的 值 。 

要 做 到 这 点 ， 我 们 使 用 操作 符 publishReplay 和 refCount。 
口 publishReplay 可 以 让 我 们 在 多 个 订阅 者 之 间 共 享 同一 个 订阅 ， 并 为 未 来 的 订阅 者 重播 n 
个 最 新 的 值 。( 参见 publish“ 和 replay® ) 
O refCount “通过 对 可 观察 对 象 何 时 发 出 值 进行 管理 ， 使 publish 方 法 的 返回 值 用 起 来 更 加 

方便 。 


















































(D https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/scan.md 

@ https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/publish.md 
®© https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/replay.md 
@ https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/refcount.md 
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等 等 ，refCount 到 底 是 干什么 的 ? 

refCount 可 能 有 一 些 不 太 好 理解 ， 因 为 它 涉及 一 个 如 何 管 理 “ 热 ”的 可 观察 对 

象 和 “ 冷 ” 的 可 观察 对 象 。 我 们 不 打算 深入 讲解 它 的 工作 原理 ， 读 者 可 自行 阅 

读 相关 文档 。 

O 关于 refCount 的 RxJS 文 档 : https://github.com/Reactive-Extensions/RxJS/blob/ 
master/doc/api/core/operators/refcount.md 

口 “Rx 介 绍 :“ 热 "的 可 观察 对 象 和 “ 冷 ' 的 可 观察 对 象 ”: http://www.introtorx.com/ 
Content/ v1.0.10621.0/14 HotAndColdObservables.html#RefCount 

O refCount #3 A f#: http://reactivex.io/documentation/operators/refcount.html 


code/rxjs/chat/app/ts/services/MessagesService.ts 


// watch the updates and accumulate operations on the messages 
.scan((messages: Message[], 

operation: IMessagesOperation) => { 

return operation(messages) ; 
}, 

initialMessages ) 
// make sure we can share the most recent list of messages across anyone 
// who's interested in subscribing and cache the last known list of 
// messages 
.publishReplay(1) 
.refCount(); 


10.5.5 }E Message 对 象 添加 到 messages 流 中 
现在 我 们 可 以 把 一 个 Message 对 象 添 加 到 messages 流 中 ， 如 下 所 示 : 


var myMessage = new Message(/* params here... */); 

updates.next( (messages: Message[]): Message[] => { 
return messages .concat(myMessage) ; 

}) 


我 们 添加 了 一 个 操作 到 updates 流 中 。 因 为 nessages 流 订阅 了 updates 流 ， 所 以 它 会 应 用 这 
个 操作 ， 而 操作 会 使 用 concat 把 我 们 的 newMessage 合 并 到 累加 的 messages 列 表 之 中 。 





如 果 这 里 需要 花费 你 一 些 时 间 来 仔细 思考 ， 也 没有 关系 。 要 是 你 不 习惯 这 种 编 
程 风格 的 话 ， 是 会 感觉 有 些 陌 生 。 












































上 面 的 方法 有 一 个 问题 , 那 就 是 它 使 用 起 来 有 些 繁琐 。 要 是 不 用 每 次 都 写 这 种 内 部 函数 就 好 
了 。 我 们 可 以 像 下 面 这样 做 : 


addMessage(newMessage: Message) { 
updates.next( (messages: Message[]): Message[] => { 
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return messages .concat(newMessage ) ; 


}) 
} 


// somewhere else 


var myMessage = new Message(/* params here... x/); 
MessagesService.addMessage(myMessage) ; 


现在 好 一 些 了 ,但 它 还 不 是 “响应 式 的 方式 ”。 这 是 因为 这 种 创建 消息 的 行为 不 能 和 其 他 流 
组 合 。( 该 方法 也 绕 过 了 newMessage 流 。 稍 后 将 进行 更 详细 的 讨论 。 ) 

创建 新 消息 的 响应 式 做 法 是 用 一 个 人 消息 列表 中 。 再 次 声 
明 ， 如 果 你 还 没有 习惯 这 种 思维 方式 的 话 ， 那 么 这 对 于 你 来 说 会 有 些 陌生 。 下 面 介绍 实现 它 的 
方法 。 

首先 ， 我们 创建 一 个 叫 作 create 的 动作 流 。( 动作 流 这 个 术语 只 是 用 来 描述 它 在 服务 中 的 角 
色 。 这 个 流 本 身 只 是 一 个 普通 的 Subject 。) 


code/rxjs/chat/app/ts/services/MessagesService.ts 



















































































// action streams 
create: Subject<Message> = new Subject<Message>(); 


接 下 来 ,我 们 在 构造 函数 中 配置 了 create 流 。 


code/rxjs/chat/app/ts/services/MessagesService.ts 


this.create 
.map( function(message: Message): IMessagesOperation { 

return (messages: Message[]) => { 

return messages .concat(message); 


I 
}) 


map 操 作 符 " 和 JavaScript 中 内 置 的 Array .map 很 像 ， 只 不 过 它 是 在 流 上 的 工作 。 也 就 是 说 ， 它 
为 流 中 的 每 一 项 运行 函数 并 发 出 函数 的 返回 值 。 
在 这 个 例子 中 ， 我 们 的 意思 是 “对 于 我 们 接收 并 作为 输入 的 每 个 Message 对 象 来 说 ， 都 返回 
Ae 它 会 把 这 个 消息 添加 到 消息 列表 中 ”。 换 名 话说 , 这 个 流 会 发 出 一 个 函数 ， 
这 个 函数 接收 Message 对 象 的 列表 并 把 这 个 Message 对 象 添 加 到 消息 列表 中 。 
现在 有 了 create 流 ， 还 有 一 件 事 要 做 : 实际 上 ， 我 们 需要 把 create 流 连接 到 updates 流 。 我 
们 使 用 subscribe ?来 完成 。 





























(D https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/select.md 
© https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/subscribe.md 
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code/rxjs/chat/app/ts/services/MessagesService.ts 


this.create 


.map( function(message: Message): IMessagesOperation { 
return (messages: Message[]l) => { 
return messages.concat(message); 


}) 


.subscribe(this.updates); 


我 们 在 这 里 所 做 的 就 是 订阅 updates 流 来 监听 create 流 。 这 表示 ， 如 果 create 流 接收 了 一 个 


Message 对 象 ， 那 么 它 会 发 出 一 个 IMessagesOperation; updates 流 会 接收 这 个 IMessages- 


Operation ， 然 后 把 Message 对 象 添加 到 messages 流 中 。 
图 10-5 展 现 了 当前 的 情况 。 


newMessage: 
Message 


updates messages 


消息 操作 
(关闭 newMessage) 


— 


把 newMessage 


加 入 messages 














图 10-5” 从 create 流 开始 创建 新 消 


al 





这 很 棒 ! 因为 它 意味 着 我 们 : 
(1) 从 messages 流 中 获取 了 当前 消息 列表 ; 


(2) 获得 了 在 当前 消 





息 列 表 上 进行 操作 的 一 种 方式 〈 通 过 updates 流 ); 


(3) 通过 一 个 简单 易 用 的 流 把 创建 操作 放 在 了 updates 流 上 (通过 create 流 )。 


不 论 在 代码 的 什么 地 方 , 只 要 想 获取 最 新 消息 列表 ,就 必须 要 用 messages 流 。 但 是 还 有 一 个 
问题 ， 我 们 还 没有 把 这 个 流程 和 newMessages 流 关联 起 来 。 


如 果 有 一 种 方式 可 以 轻松 地 把 这 个 流 和 任何 newMessages 流 发 出 的 Message 关 联 起 来 ， 那 就 
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太 好 了 。 事 实证 明 这 很 容易 。 


code/rxjs/chat/app/ts/services/MessagesService.ts 


this .newMessages 
.subscribe(this.create); 


现在 的 情况 如 图 10-6 所 示 。 





newMessages updates messages 





Message newMessage ————— ——»| E 
| GEB 
(关闭 newMssgae) 
把 newMessage 


加 入 messages 




















图 10-6 ”从 newMessages 流 开始 创建 新 消息 


现在 的 流程 完整 了 1 这 也 是 两 全 其 美的 : 我 们 能 够 通过 订阅 newMessages 来 获取 单条 消息 ; 
而 如 果 只 想 要 最 新 的 消息 列表 ， 我 们 可 以 订阅 messages 流 。 









































这 里 需要 指出 这 个 设计 的 一 些 影 响 : 如 果 你 直接 订阅 了 newMessages 流 ， 必 须 
要 注意 变化 可 能 发 生 在 下 游 。 这 里 有 三 点 需要 考虑 。 
> 一 ， 显 然 不 会 有 任何 下 游 的 更 新 应 用 于 Message。 

ORAE fv, S118 Message X OCT IIO 如 果 你 订阅 newMessages 
RA 了 Message 的 引用 ， 那 么 这 个 Message 的 属性 可 能 会 产生 变化 。 
第 三 ， 如 果 想 利用 Message 的 可 变性 ， 你 可 能 无 法 做 到 。 考 虑 这 种 情况 : 我 们 可 
penis 上 增加 一 个 操作 ， 此 操作 复制 每 个 Message ee 
本 。( 与 我 们 现在 的 做 法 相 比 ， 这 应 该 是 更 好 的 设计 。) 在 这 个 例子 中 ， 你 不 
依赖 任何 从 newMessages 流 直接 发 出 的 Message， 因 为 它们 是 可 以 改变 的 。 
尽管 如 此 ， 只 要 你 记 住 这 些 注意 事项 ， 就 应 该 不 会 有 太 大 麻烦 。 


10.5.6 ”完整 的 MessagesService 


完整 的 MessagesService 代 码 如 下 。 
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code/rxjs/chat/app/ts/services/MessagesService.ts 


import {Injectable} from 'Gangular/core'; 
import {Subject, Observable} from 'rxjs'; 
import {User, Thread, Message} from '../models'; 


let initialMessages: Message[] = []; 


interface IMessagesOperation extends Function { 
(messages: Message[]): Message[]; 


} 


@Injectable() 

export class MessagesService { 
// a stream that publishes new messages only once 
newMessages: Subject«Message» = new Subject«Message»(); 


// ~messages~ is a stream that emits an array of the most up to date messages 
messages: Observable«Message[]»; 


// ^updates^ receives operations, to be applied to our "messages" 

// it's a way we can perform changes on xall« messages (that are currently 
// stored in ^messages') 

updates: Subject«any» - new Subject«any»(); 


// action streams 
create: Subject«Message» - new Subject«Message»(); 
markThreadAsRead: Subject«any» - new Subject«any»(); 





constructor() { 
this.messages - this.updates 
// watch the updates and accumulate operations on the messages 
.scan((messages: Message[], 
operation: IMessagesOperation) => { 
return operation(messages); 
}, 
initialMessages ) 
// make sure we can share the most recent list of messages across anyone 
// who's interested in subscribing and cache the last known list of 
// messages 
.publishReplay(1) 
.refCount(); 





// ^create^ takes a Message and then puts an operation (the inner function) 
// on the ^updates^ stream to add the Message to the list of messages. 


// That is, for each item that gets added to ^create^ (by using ~next>) 
// this stream emits a concat operation function. 


// Next we subscribe ^this.updates^ to listen to this stream, which means 
// that it will receive each operation that is created 


// Note that it would be perfectly acceptable to simply modify the 
// "addMessage" function below to simply add the inner operation function to 
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// the update stream directly and get rid of this extra action stream 
// entirely. The pros are that it is potentially clearer. The cons are that 
// the stream is no longer composable. 
this.create 
.map( function(message: Message): IMessagesOperation { 
return (messages: Message[]) => { 
return messages .concat(message); 
5 
}) 


.subscribe(this.updates); 


this.newMessages 
.subscribe(this.create); 


// similarly, ^markThreadAsRead' takes a Thread and then puts an operation 
// on the ^updates^ stream to mark the Messages as read 
this.markThreadAsRead 
.map( (thread: Thread) => { 
return (messages: Message[]) => { 
return messages.map( (message: Message) => { 
// note that we're manipulating ~message~ directly here. Mutability 
// can be confusing and there are lots of reasons why you might want 
// to, say, copy the Message object or some other 'immutable' here 
if (message.thread.id === thread.id) { 
message.isRead = true; 
j 
return message; 
]95 
}) 


.subscribe(this.updates); 


// an imperative function call to this action stream 
addMessage(message: Message): void ( 
this.newMessages.next(message); 


} 


messagesForThreadUser(thread: Thread, user: User): Observable<Message> { 
return this.newMessages 
.filter((message: Message) => { 
// belongs to this thread 


return (message.thread.id === thread.id) && 
// and isn't authored by this user 
(message.author.id !== user.id); 
DE 


export var messagesServiceInjectables: Array«any» = [ 


MessagesService 


I; 
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10.5.7 试用 MessagesService 











如 果 你 还 没有 完全 理解 ， 那 么 现在 是 个 打开 代码 并 随意 尝试 MessagesService 的 好 时 机 ， 来 感 
受 一 下 它 是 如 何 运 作 的 。 在 test/services/MessagesService.spec.ts 中 有 一 个 示例 ， 可 以 直接 拿 来 使 用 。 




















e 要 运行 这 个 项 目的 测试 ， 可 以 打开 终端 ， 然 后 输入 以 下 代码 : 


cd /path/to/code/rxjs/chat // «-- your path will vary 
npm install 
karma start 





首先 创建 一 些 数据 模型 的 实例 。 


code/rxjs/chat/test/services/MessagesService.spec.ts 


import {MessagesService} from '../../app/ts/services/services'; 
import {Message, User, Thread} from '../../app/ts/models'; 


describe('MessagesService', () => { 
it('should test', () => { 


let user: User = new User('Nate', ''); 
let thread: Thread = new Thread('t1', 'Nate', ''); 
let mi: Message = new Message( { 


author: user, 
text: 'Hi!', 
thread: thread 


5; 


let m2: Message = new Message( { 
author: user, 

text: 'Bye!', 

thread: thread 

D; 


接 下 来 ， 订 阅 几 个 流 。 








code/rxjs/chat/test/services/MessagesService.spec.ts 


let messagesService: MessagesService = new MessagesService(); 


// listen to each message indivdually as it comes in 
messagesService.newMessages 
.subscribe( (message: Message) => { 
console.log('=> newMessages: ' + message.text); 


); 


// listen to the stream of most current messages 
messagesService.messages 
.subscribe( (messages: Message[]) => { 
console.log('=> messages: ' + messages.length); 


F) 
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messagesService.addMessage(m1); 
messagesService.addMessage(m2); 


// => messages: 1 
// => newMessages: Hi! 
// => messages: 2 
// => newMessages: Bye! 


); 


IDE 


主意 , 尽管 我 们 先 订 阅 了 newMessages 并 且 newMessages 是 通过 addMessage 方 法 直接 调用 的 , 
证 了 日 志 。 原 因 就 是 messages 流 订阅 newMessages 流 早 于 测试 代码 中 
( 当 MessagesService 实 例 化 时 )。( 你 不 应 该 依赖 于 代码 中 单独 的 流 的 顺序 , 但 是 它 为 什 

这 种 方式 运行 是 值得 思考 的 。) 


尝试 使 用 MessagesService 并 感受 一 下 这 些 流 是 如 何 工 作 的 。 我 们 将 在 下 节 中 使 用 它们 来 构 
建 ThreadsService。 




















10.6 ThreadsService 


在 ThreadsService 中 将 定义 四 个 流 ， 它 们 分 别 发 出 : 

(1) 当前 一 组 Thread 的 映射 (threads 流 ); 

(2) 按时 间 逆序 排列 的 Thread 列 表 (orderedthreads 流 ); 

(3) 当前 已 选 的 Thread (currentThread 流 ); 

(4) 当前 已 选 Thread 的 Message 列 表 (currentThreadMessages 流 )。 


下 面 来 讨论 如 何 构 建 这 里 的 每 一 个 流 。 在 这 个 过 程 中 ， 我 们 还 将 学 习 更 多 关于 RxJS 的 知识 。 


10.6.1 ”当前 一 组 Thread AYBRET (threads iit) 
我 们 先 来 定义 ThreadsService 类 和 用 来 发 出 Thread 的 实例 变量 。 


code/rxjs/chat/app/ts/services/ThreadsService.ts 


import {Injectable} from '@angular/core'; 

import {Subject, BehaviorSubject, Observable} from 'rxjs'; 
import {Thread, Message} from '../models'; 

import {MessagesService} from './MessagesService'; 

import x as _ from 'underscore'; 


GInjectable() 
export class ThreadsService { 
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// ~threads~ is a observable that contains the most up to date list of threads 
threads: Observable<{ [key: string]: Thread }>; 


注意 ， 这 个 流 会 发 出 一 个 映射 ( 即 一 个 对 象 )， 将 Thread 的 id 作为 string 键 ，Thread 本 身 作 
为 值 。 
要 创建 一 个 用 来 维护 当前 会 话 列表 的 流 ， 我 们 先 附加 到 messagesService.messages 流 。 





code/rxjs/chat/app/ts/services/ThreadsService.ts 
threads: Observable<{ [key: string]: Thread }>; 


回忆 一 下 , 每 次 把 一 个 新 的 Message 对 象 添 加 到 流 时 ,messages 流 都 会 发 出 一 个 当前 Message 
对 象 的 数组 。 我 们 要 查看 每 个 Message 对 象 并 返回 唯一 的 Threads 列 表 。 


code/rxjs/chat/app/ts/services/ThreadsService.ts 


this.threads = messagesService.messages 
.map( (messages: Message[]) => { 
let threads: {[key: string]: Thread} = {}; 
// Store the message's thread in our accumulator ~threads~ 
messages.map((message: Message) => { 
threads [message.thread.id] = threads[message.thread.id] || 
message. thread; 


注意 ， 每 次 都 会 创建 一 个 新 的 threads 列 表 。 这 样 做 的 原因 是 ， 我 们 可 能 会 彻底 删除 一 些 消 
息 (例如 离开 对 话 )。 因 为 每 次 我 们 都 重新 计算 会 话 列表 ， 所 以 自然 而 然 地 “删除 ”了 没有 消息 
的 会 话 。 

在 会 话 列表 中 ， 我 们 想 通 过 使 用 Thread 中 的 最 新 Message 来 显示 聊天 预览 。 


Echo Bot * 
I'll echo whatever you send me 
Reverse Bot 

- I'll reverse whatever you send me 
Waiting Bot 
I'll wait however many seconds you send 
to me before responding. Try sending '3' 


Lady Capulet 
So shall you feel the loss, but not the 
friend which you weep for. 


图 10-7 带 有 聊天 预览 功能 的 会 话 列 表 


要 做 到 这 一 点 ,我 们 在 每 个 Thread 中 都 保存 了 最 新 的 Message。 通 过 比较 sentAt 时 间 就 可 以 
知道 哪个 Message 是 最 新 的 。 
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code/rxjs/chat/app/ts/services/ThreadsService.ts 


// Cache the most recent message for each thread 
let messagesThread: Thread = threads[message. thread. id]; 
if (!messagesThread.lastMessage | | 
messagesThread.lastMessage.sentAt « message.sentAt) { 
messagesThread.lastMessage = message; 
j 
15 
return threads; 


IDE 
把 所 有 代码 整合 起 来 ，threads 流 看 起 来 如 下 所 示 。 


code/rxjs/chat/app/ts/services/ThreadsService.ts 


this.threads = messagesService.messages 
.map( (messages: Message[]) => { 
let threads: {[key: string]: Thread} = {}; 
// Store the message's thread in our accumulator ~threads~ 
messages.map((message: Message) => { 
threads [message.thread.id] = threads[message.thread.id] |l 
message. thread; 


// Cache the most recent message for each thread 
let messagesThread: Thread = threads[message. thread. id]; 
if (!messagesThread.lastMessage | | 
messagesThread.lastMessage.sentAt « message.sentAt) { 
messagesThread.lastMessage = message; 


} 
1) 
return threads; 
Hs 
试用 ThreadsService 





我 们 来 试 试 ThreadsService。 首 先 创 建 一 些 要 用 的 数据 模型 。 


code/rxjs/chat/test/services/ThreadsService.spec.ts 


import {MessagesService, ThreadsService} from '../../app/ts/services/services'; 
import {Message, User, Thread} from '../../app/ts/models'; 
import x as _ from 'underscore'; 


describe('ThreadsService', () => { 
it('should collect the Threads from Messages', () => { 


let nate: User - new User('Nate Murray', ''); 

let felipe: User - new User('Felipe Coury', ''); 
let ti: Thread = new Thread('t1', 'Thread 1', ''); 
let t2: Thread - new Thread('t2', 'Thread 2', ''); 








let m1: Message = new Message( { 
author: nate, 
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text: 'Hi!', 
thread: t1 
}); 


let m2: Message = new Message( { 
author: felipe, 

text: 'Where did you get that hat?', 
thread: t1 


}); 


let m3: Message = new Message( { 

author: nate, 

text: 'Did you bring the briefcase?', 
thread: t2 


135. 
创建 服务 的 一 个 实例 。 








code/rxjs/chat/test/services/ThreadsService.spec.ts 


let messagesService: MessagesService = new MessagesService(); 
let threadsService: ThreadsService = new ThreadsService(messagesService) ; 


e 注意 ， 这 里 把 messagesService 作 为 参数 传 给 了 ThreadsService 的 构造 函数 。 
我 们 通常 让 依赖 注入 系统 来 处 理 这 些 ， 但 在 测试 中 可 以 自己 提供 依赖 关系 。 
我 们 订阅 threads 流 并 把 通过 流 的 内 容 打印 出 来 。 
code/rxjs/chat/test/services/ThreadsService.spec.ts 

let threadsService: ThreadsService = new ThreadsService(messagesService) ; 


threadsService. threads 
.subscribe( (threadIdx: { [key: string]: Thread }) => ( 


let threads: Thread[] _.values(threadIdx) ; 

let threadNames: string = _.map(threads, (t: Thread) => t.name) 
-join(', '); 

console.log(*=> threads (${threads.length}): ${threadNames} ^); 


J) 


messagesService.addMessage(m1); 
messagesService.addMessage(m2); 
messagesService.addMessage(m3); 


// => threads (1): Thread 1 
// => threads (1): Thread 1 
// => threads (2): Thread 1, Thread 2 


DP 
5; 
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10.6.2 ”按时 间 逆 序 排列 的 Thread 列表 (orderedthreads 流 ) 


threads 流 给 了 我 们 一 个 映射 ， 作 为 会 话 列 表 的 一 个 “索引 ”。 但 是 我 们 想 让 会 话 视 图 根据 最 
新 消息 的 时 间 来 排序 ， 如 图 10-8 所 示 。 


Echo Bot * 
I'll echo whatever you send me 
Reverse Bot 

- I'll reverse whatever you send me 
Waiting Bot 
I'll wait however many seconds you send 
to me before responding. Try sending '3' 


Lady Capulet 
So shall you feel the loss, but not the 
friend which you weep for. 


图 10-8 按时 间 逆 序 排 列 的 会 话 
创建 一 个 新 的 流 ， 它 返回 一 个 按 最 新 Message 时 间 排 序 的 Thread 数 组 。 
我 们 首先 定义 orderedThreads 并 把 它 作 为 一 个 实例 属性 。 


code/rxjs/chat/app/ts/services/ThreadsService.ts 























38] 





// ~orderedThreads~ contains a newest-first chronological list of threads 
orderedThreads: Observable«Thread[]»; 


接 下 来 ,在 constructor 中 通过 订阅 threads 流 并 按 最 新 消息 时 间 排 序 定义 orderedThreads。 





code/rxjs/chat/app/ts/services/ThreadsService.ts 


this.orderedThreads = this.threads 
.map((threadGroups: { [key: string]: Thread }) => { 
let threads: Thread[] = _.values(threadGroups) ; 
return _.sortBy(threads, (t: Thread) => t.lastMessage.sentAt).reverse(); 


1: E 


10.6.3 ”当前 已 选 的 Thread (currentThread 流 ) 
我 们 的 应 用 需要 知道 当前 已 选 的 Thread 是 哪个 。 这 让 我 们 知道 
(1) 哪个 会 话 应 该 在 消息 窗口 显示 ; 
(2) 会 话 列表 中 的 哪个 会 话 应 该 被 标记 为 当前 会 话 ( 如 图 10-9 所 示 )。 
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Echo Bot 
I'll echo whatever you send me 
Reverse Bot * 
3 I'll reverse whatever you send me 
Waiting Bot 
L I'll wait however many seconds you send to me before responding. Try sending '3 


Lady Capulet 
So shall you feel the loss, but not the friend which you weep for. 





图 10-9 使 用 ' 符号 表示 当前 会 话 








创建 一 个 BehaviorSubject 并 把 它 保 存 为 currentThread 流 。 


code/rxjs/chat/app/ts/services/ThreadsService.ts 


// ~currentThread~ contains the currently selected thread 
currentThread: Subject<Thread> = 
new BehaviorSubject«Thread»(new Thread()); 


注意 ,这 里 分 配 了 一 个 空 的 Thread 作 为 默认 值 。 我 们 不 再 需要 对 currentThread 进 行 更 多 配 
置 了 。 


1. 设置 当前 会 话 

要 设置 当前 会 话 ，currentThread 流 可 以 选择 下 面 的 其 中 一 个 方法 : 

(1) 直接 通过 next 方 法 提交 新 会 话 ; CN 
(2) 添加 一 个 辅助 函数 提交 新 会 话 。 

我 们 定义 一 个 辅助 函数 setCcurrentThread， 可 以 使 用 它 来 设置 下 一 个 会 话 。 



























































code/rxjs/chat/app/ts/services/ThreadsService.ts 


setCurrentThread(newThread: Thread): void { 
this.currentThread.next(newThread); 


) 
2. 标记 当前 会 话 为 已 读 


我 们 想 要 记录 未 读 消息 数量 。 如 果 切 换 到 一 个 新 Thread， 要 把 那个 Thread 中 的 所 有 Message 
都 标记 为 已 读 。 我 们 拥有 做 到 这 些 所 需 的 工具 


(1) messagesService.makeThreadAsRead 接 收 一 个 Thread ， 然 后 把 这 个 Thread 中 的 所 有 
Message 都 标记 为 已 读 ; 


(2) currentThread 流 发 出 单个 的 Thread， 它 代表 当前 Thread。 
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要 做 的 就 是 把 它们 关联 起 来 。 


code/rxjs/chat/app/ts/services/ThreadsService.ts 





this.currentThread.subscribe(this.messagesService.markThreadAsRead) ; 


10.6.4 ”当前 已 选 Thread 的 Message 列表 (currentThreadMessages 流 ) 





现在 有 了 当前 已 选 会 话 ， 需 要 确保 显示 这 个 Thread 的 Message 列 表 ( 如 图 10-10 所 示 )。 


Vli Chat - Reverse Bot 





I'll reverse whatever you send me n 
6" 

or 

= n 
| Write your message here. Eg 

l 





图 10-10 ”当前 消息 列表 来 自 反 转机 器 人 (Reverse Bot ) 
它 的 实现 比 表 面 上 看 起 来 要 复杂 一 些 。 我 们 这 样 来 实现 它 : 


var theCurrentThread: Thread; 





this.currentThread.subscribe((thread: Thread) => { 
theCurrentThread = thread; 


}) 


this.currentThreadMessages .map( 
(mesages: Message[]) => { 
return _.filter(messages, 
(message: Message) => { 
return message.thread.id == theCurrentThread. id; 
}) 
}) 





这 种 方法 有 什么 问题 ? 如 果 currentThread 改 变 了 ， 而 currentThreadMessages 完 全 不 知道 5 

















那么 currentThreadMessages 就 是 一 个 过 时 了 的 消息 列表 ! 


如 果 颠 倒 一 下 呢 ? 在 一 个 变量 中 保存 当前 消息 列表 ,然后 订阅 currentThread 流 的 变化 ， 
发 生 什么 呢 ? 还 是 会 有 同样 的 问题 ， 只 是 这 次 我 们 知道 会 话 变化 ， 但 是 不 知道 有 新 消息 进来 。 











会 
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如 何 解 决 这 个 问题 呢 ? 


原来 ，RxJS 有 一 组 操作 符 用 来 合并 多 个 流 。 在 这 个 例子 中 ， 我 们 想 说 的 是 “如 果 current- 
Thread 和 和 messagesService.messages 中 的 任何 一 个 改变 了 ,那么 就 要 发 出 一 些 东 西 ”。 为 此 , 我 
们 使 用 combineLatest 操 作 符 ”。 


code/rxjs/chat/app/ts/services/ThreadsService.ts 




















this.currentThreadMessages = this.currentThread 
.combineLatest(messagesService.messages, 
(currentThread: Thread, messages: Message[]) => { 


当 合并 两 个 流 时 ,会 有 一 个 先 到 达 , 不 能 保证 在 两 个 流 上 都 有 值 ， 所 以 需要 检查 以 确保 有 我 
们 所 需要 的 ; 否则 就 会 返回 一 个 空 列 表 。 


现在 有 了 当前 会 话 和 消息 列表 ， 就 可 以 过 滤 出 我 们 想 要 的 消息 了 。 


code/rxjs/chat/app/ts/services/ThreadsService.ts 


this.currentThreadMessages = this.currentThread 
.combineLatest(messagesService.messages, 
(currentThread: Thread, messages: Message[]) => { 
if (currentThread && messages.length > 0) { 
return  .chain(messages) 


.filter((message: Message) => 
(message.thread.id === currentThread.id)) 


还 有 一 个 细节 : 既然 我 们 已 经 找到 了 当前 会 话 的 消息 , 把 这 些 消 息 标记 为 已 读 就 是 很 方便 的 。 


code/rxjs/chat/app/ts/services/ThreadsService.ts 
return _.chain(messages ) CN 
.filter((message: Message) => 


(message.thread.id === currentThread.id)) 
.map((message: Message) => { 
message.isRead = true; 
return message; }) 
.value(); 





A 关于 是 否 应 该 在 这 里 把 消息 标记 为 已 读 是 有 争议 的 。 标 记 为 已 读 的 最 大 缺点 就 
是 我 们 更 改 了 对 象 本 身 ， 而 本 质 上 这 是 一 个 “只 读 ” 会 话 。 也 就 是 说 ， 这 是 一 
个 有 副作用 的 读 操 作 , 一 般 不 应 该 使 用 尽管 如 此 ,本 应 用 中 的 currentThread- 
Messages 流 只 作用 于 currentThread 流 ,而 currentThread 流 应 始终 把 它 的 消息 

标记 为 已 读 。 不 过 ， 我 通常 不 推荐 “有 副作用 的 读 操作 ”模式 。 





把 所 有 代码 整合 起 来 ，currentThreadMessages 看 起 来 是 这 样 的 。 





© https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/combinelatestproto.md 
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code/rxjs/chat/app/ts/services/ThreadsService.ts 


this.currentThreadMessages = this.currentThread 
.combineLatest(messagesService.messages, 
(currentThread: Thread, messages: Message[]) => { 
if (currentThread && messages.length > 0) { 
return  .chain(messages) 
.filter((message: Message) => 
(message. thread.id === currentThread.id)) 
.map((message: Message) => { 
message.isRead = true; 
return message; }) 


.value(); 
} else { 
return []; 


} 
F); 


10.6.5 “完整 的 ThreadsService 


ThreadService 完 整 代 码 如 下 所 示 。 


code/rxjs/chat/app/ts/services/ThreadsService.ts 


import {Injectable} from '@angular/core'; 

import {Subject, BehaviorSubject, Observable} from 'rxjs'; 
import {Thread, Message} from '../models'; 

import {MessagesService} from './MessagesService'; 

import x as _ from 'underscore'; 


@Injectable() 
export class ThreadsService { 


// ~threads~ is a observable that contains the most up to date list of threads 
threads: Observable<{ [key: string]: Thread }>; 





// ~orderedThreads~ contains a newest-first chronological list of threads 
orderedThreads: Observable«Thread[]»; 


// ~currentThread~ contains the currently selected thread 
currentThread: Subject<Thread> = 
new BehaviorSubject<Thread>(new Thread()); 


// ~currentThreadMessages~ contains the set of messages for the currently 
// selected thread 


currentThreadMessages: Observable«Message[]»; 





constructor(private messagesService: MessagesService) { 


this.threads - messagesService.messages 
.map( (messages: Message[]) => { 
let threads: {[key: string]: Thread} = {}; 
// Store the message's thread in our accumulator ~threads~ 
messages.map((message: Message) => { 
threads [message.thread.id] = threads[message.thread.id] |l 





message. thread; 


// Cache the most recent message for each thread 
let messagesThread: Thread = threads[message.thread.id]; 
if (!messagesThread.lastMessage | | 
messagesThread. lastMessage.sentAt < message.sentAt) { 
messagesThread. lastMessage = message; 
} 
}); 


return threads; 


); 


this.orderedThreads - this.threads 
.map((threadGroups: { [key: string]: Thread }) => { 
let threads: Thread[] = ..values(threadGroups); 
return _.sortBy(threads, (t: Thread) => t.lastMessage.sentAt).reverse(); 


F3; 


this.currentThreadMessages = this.currentThread 
.combineLatest(messagesService.messages, 
(currentThread: Thread, messages: Message[]) => { 
if (currentThread && messages.length > 0) { 
return _.chain(messages ) 
.filter((message: Message) => 
(message.thread.id === currentThread.id)) 
.map((message: Message) => { 
message.isRead = true; 
return message; }) 
.value(); 
} else { 
return []; 





} 
); 





this.currentThread.subscribe(this.messagesService.markThreadAsRead); 


} 


setCurrentThread(newThread: Thread): void { 
this.currentThread.next(newThread); 


} 
} 


export var threadsServiceInjectables: Array<any> = [ 
ThreadsService 


]; 


10.7 ”总结 


数据 模型 和 服务 已 经 完成 ! 现在 , 我 们 拥有 了 连接 到 视图 组 件 所 需要 的 一 切 ! 在 下 章 中 , 我 
们 将 构建 三 个 重要 的 组 件 ， 用 来 泻 染 页 面 并 和 本 章 所 创建 的 流 进行 交互 。 
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11.1 构建 视图 : 顶层 组 件 ChatApp 
现在 把 注意 力 转向 应 用 并 来 完成 视图 组 件 。 





为 了 简洁 以 及 节省 空间 起 见 ， 本 章 会 省 去 一 些 import 声 明 、CSS 和 一 些 其 他 类 
似 的 代码 行 。 如 果 你 对 这 些 细节 的 每 一 行 代码 都 感 兴趣 的 话 ， 可 以 打开 示例 代 
码 ， 那 里 党 括 了 运行 程序 所 需要 的 一 切 。 

















首先 要 做 的 就 是 创建 顶层 组 件 chat-app。 
正如 之 前 讨论 过 的 ， 页 面 会 被 分 解 成 三 个 顶层 组 件 ( 如 图 11-1 所 示 )。 


O ChatNavBar: 包含 未 读 消 息 数 。 
O ChatThreads: 展示 一 个 可 点 击 的 会 话 列表 ， 每 个 会 话 都 包含 最 新 消息 和 会 话 头 像 。 
O ChatWindow: 展示 当前 会 话 的 消息 和 一 个 用 来 发 送 新 消息 的 输入 框 。 
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@ C @ ， 门 Angularz - Chat with Rxus x 











€ > Q  [localhost:8080 ies 
m—A— 


5 Mid ChatThreads 


I'll echo whatever you send me 


Reverse Bot 
= Gil reverse whatever you send me 


Waiting Bot 
I'll wait however many seconds you send to me before responding. Try sending '3' 


Lady Capulet 
So shall you feel the loss, but not the friend which you weep for. 





ChatWindow 


§ Chat - Echo Bot 
I'll echo whatever you n 
send me 





图 11-1 ”聊天 应 用 的 顶层 组 件 
下 面 是 组 件 的 代码 。 


code/rxjs/chat/app/ts/app.ts 


@Component ( f 
selector: 'chat-app', 
template: ~ 
<div> 

«nav-bar»«/nav-bar» 

«div class="container"> 
«chat-threads»«/chat-threads» 
«chat-window»«/chat-window» 

«/div» 

«/div» 


}) 
class ChatApp { 
constructor (private messagesService: MessagesService, 
private threadsService: ThreadsService, 
private userService: UserService) { 
ChatExampleData.init(messagesService, threadsService, userService); 


} 
} 





@NgModule( { 
declarations: [ 
ChatApp, 
ChatNavBar, 
ChatThreads, 
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ChatThread, 

ChatWindow, 

ChatMessage, 

utilInjectables 
], 


imports: [ 
BrowserModule, 
FormsModule 


l, 
bootstrap: [ ChatApp ], 
providers: [ servicesInjectables ] 


}) 
export class ChatAppModule {} 


platformBrowserDynamic().bootstrapModule(ChatAppModule); 


注意 constructor ， 在 这 个 构造 酚 数 中 我 们 要 注入 三 个 服务 : MessagesService 、 
ThreadsService 和 UserService。 我 们 使 用 这 些 服务 来 初始 化 示例 数据 。 


如 果 你 对 示例 数据 感 兴趣 的 话 ， 可 以 在 code/rxjs/chat/app/ts/ChatExampleData.ts 
中 找到 它 。 


11.2 ChatThreads 组 件 
接 下 来 ， 我 们 在 chatThreads 组 件 中 构建 会 话 列表 。 


Echo Bot * 
I'll echo whatever you send me 
Reverse Bot 
- I'll reverse whatever you send me 
Waiting Bot 
I'll wait however many seconds you send 
to me before responding. Try sending '3' 
Lady Capulet 
So shall you feel the loss, but not the 
friend which you weep for. 
图 11-2 ”按时 间 排 序 的 会 话 列表 
al, Sfp — 
selector 非 常 直观 ， 我 们 要 匹配 chat-threads 元 素 。 





code/rxjs/chat/app/ts/components/ChatThreads.ts 


@Component ( { 
selector: 'chat-threads', 
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11.2.1. ChatThreads 控制 器 
下 面 看 看 组 件 的 控制 器 ChatThreads 类 。 


code/rxjs/chat/app/ts/components/ChatThreads.ts 


export class ChatThreads { 
threads: Observable«any»; 


constructor(private threadsService: ThreadsService) { 
this.threads - threadsService.orderedThreads; 


j 
} 


我 们 在 这 里 注入 了 ThreadsService， 然 后 保存 了 orderedThreads 的 引用 。 





11.2.2 ChatThreads 的 template 
最 后 ， 我 们 来 看 一 下 template 及 其 配置 。 


code/rxjs/chat/app/ts/components/ChatThreads.ts 





@Component ( f 
selector: 'chat-threads', 
changeDetection: ChangeDetectionStrategy.OnPush, 
template: ^ 
<!-- conversations --» 
«div class="row"> 
«div class="conversation-wrap" > 


«chat-thread 
xngFor-"let thread of threads | async" 
[thread]="thread"> 

«/chat-thread» 





























这 里 需要 注意 的 是 , 使 用 async 管 道 的 ngFor 指 令 .ChangeDetectionStrategy 和 ChatThread 
组 件 。 
ChatThread 组 件 (在 标记 中 匹配 chat-thread ) 将 展现 聊天 会 话 的 视图 。 我 们 稍 后 就 会 来 定 








ngFor 遍 历 threads 属 性 并 把 值 通 过 输入 属性 [thread] 传 给 chatThread 组 件 。 但 你 可 能 注意 
到 xngFor 中 出 现 了 新 东西 : async 管 道 。 

async 是 通过 AsyncPipe 实 现 的 ， 它 可 以 让 我 们 在 视图 中 使 用 RxJS 的 Observable。async 的 
强大 之 处 在 于 可 以 让 我 们 像 使 用 同步 集合 一 样 来 使 用 异步 可 观察 对 象 。 这 个 特性 极其 方便 并 且 
非常 棒 。 


jaen 
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在 这 个 组 件 中 , 我 们 指定 了 一 个 特定 的 changeDetection。Angular 提 供 一 个 灵活 高 效 的 变更 
探测 系统 。 它 的 好 处 之 一 就 是 如 果 一 个 组 件 拥 有 不 变 的 或 者 可 观察 的 绑 定 , 那么 我 们 可 以 向 变更 
探测 系统 发 送 提 示 ， 让 应 用 高 效 地 运行 。 

在 这 个 例子 中 , Angular 不 再 观察 Thread 数 组 的 变化 ; 取而代之 的 是 订阅 可 观察 对 象 threads 
的 变化 ， 并 且 在 一 个 新 的 事件 发 出 后 触发 更 新 。 


下 面 是 完整 的 ChatThreads 组 件 。 
































code/rxjs/chat/app/ts/components/ChatThreads.ts 


@Component ( { 
selector: 'chat-threads', 
changeDetection: ChangeDetectionStrategy.OnPush, 
template: ^ 
<!-- conversations --» 
<div class="row"> 
«div class="conversation-wrap" > 


«chat-thread 
«ngFor="let thread of threads | async" 
[thread]="thread"> 

«/chat-thread» 


«/div» 
«/div» 


}) 


export class ChatThreads { 
threads: Observable«any»; 


constructor(private threadsService: ThreadsService) { 
this.threads - threadsService.orderedThreads; 


} 
} 


11.3 单个 chatThread 组 件 
下 面 来 看 一 下 ChatThread 组 件 ， 它 用 来 展示 单个 会 话 。 我 们 先 从 @Component 开 始 。 


code/rxjs/chat/app/ts/components/ChatThreads.ts 


@Component ( { 
inputs: ['thread'], 
selector: 'chat-thread', 
template: ^ 
«div class="media conversation"> 
«div class="pull-left"> 
«img class-"media-object avatar" 
src="{{thread.avatarSrc}}"> 
</div> 
«div class-"media-body"» 
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«h5 class-"media-heading contact-name"> {{thread.name} } 
«span xngI f="selected">&bull; </span> 


«/h5» 

«small class-"message-preview"»([thread.lastMessage.text]]«/small» 
«/div» 
«a (click)="clicked($event)" class-"div-link"»Select«/a» 


«/div» 


}) 
稍 后 再 回来 看 kemplate ， 我 们 先 来 看 看 组 件 定义 的 控制 器 。 


11.3.1 ChatThread 控制 器 和 ngOnInit 


code/rxjs/chat/app/ts/components/ChatThreads.ts 


export class ChatThread implements OnInit { 
thread: Thread; 
selected: boolean = false; 


constructor(private threadsService: ThreadsService) { 


} 


ngOnInit(): void { 
this. threadsService.currentThread 
.subscribe( (currentThread: Thread) => { 
this.selected = currentThread && 
this.thread && 
(currentThread.id === this.thread.id); 


5; 
} 


clicked(event: any): void { 
this.threadsService.setCurrentThread(this. thread) ; 
event. preventDefault(); 


} 
} 


Mg pou M rus : OnIn 让 。Angular 组 件 可 以 声明 它们 监听 了 某 些 生命 周期 事 
件 。 第 14 章 会 进一步 讨论 生命 周期 事件 。 

在 这 个 例子 中 , 因为 我 们 已 经 声明 实现 了 onInit, 所 以 当 组 件 第 一 次 检查 变化 后 就 会 调用 组 
件 中 的 ngonInit 方 法 。 

使 用 ngonInit 的 一 个 关键 原因 在 于 输入 属性 thread 在 constructor 中 是 获取 不 到 的 。 

在 上 面 可 以 看 到 ， 我 们 在 ngonIn 让 中 订阅 了 threadsService.currentThread 。 如 果 
currentThread 匹 配 组 件 中 的 thread 属 性 ， 那 么 就 把 selected 属 性 设置 为 true。( 如 果 不 匹 配 ， 
就 把 selected 属 性 设置 为 false。) 


我 们 还 设置 了 一 个 事件 处 理 器 clicked， 用 来 处 理 选择 当前 会 话 的 事件 。 在 template 中 【人 参 
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见 11.3.2 节 )， 我 们 会 把 会 话 视图 上 的 点 击 和 clicked() 绑 定 。 如 果 触 发 了 clicked() ， 就 告诉 
threadsService 要 把 组 件 的 Thread 设 置 成 当前 会 话 设置 。 











11.3.2 ChatThread HJ template 





下 面 是 template 的 代码 。 


code/rxjs/chat/app/ts/components/ChatThreads.ts 


template: ^ 
«div class="media conversation"> 
«div class="pull-left"> 
«img class-"media-object avatar" 
src="{{thread.avatarSrc}}"> 
</div> 
«div class-"media-body"» 
«h5 class-"media-heading contact-name"»(Í[thread.name]] 


«span xngI f="selected">&bull; </span> 


«/h5» 
«small class="message-preview">{{thread. lastMessage.text}}</small> 


</div> 
«a (click)="clicked($event)" class-"div-link"»Select«/a» 


«/div» 
注意 这 里 有 一 些 简 单 的 绑 定 ， 如 {{fthread.avatarSrc}} {{thread.name}} #il{{thread. 
lastMessage.text}}. 
我 们 还 用 #*ngIf 来 显示 符号 &bul1; ， 只 有 已 选择 的 会 话 才 会 显示 。 
后 绑 定 了 (click) 事 件 来 调用 cl icked( ) 处 理 器 。 注 意 , 调 用 clicked 时 传人 了 参数 $event ， 
这 一 个 用 来 描述 事件 的 寺 殊 变量 ， 由 Angular 提 供 。 我 们 在 clickedq 处 理 吉 中 通过 调用 方法 


这 是 一 


event .preventDefault() ;使 用 了 $event 变 量 。 这 可 以 确保 我 们 不 会 跳 转 至 其 他 页 面 。 











T 















































11.3.3 ChatThread 的 完整 代码 





下 面 是 完整 的 chatThread 组 件 。 


code/rxjs/chat/app/ts/components/ChatThreads.ts 


@Component ( { 
inputs: ['thread'], 
selector: 'chat-thread', 
template: ^ 
«div class="media conversation"> 
«div class="pull-left"> 
«img class-"media-object avatar" 
src="{{thread.avatarSrc}}"> 
</div> 


11.4 ChatWindow 组 件 
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«div class="media—body"> 
«h5 class-"media-heading contact-name"> { {thread .name} } 
«span xngI f="selected">&bull; </span> 


«/h5» 
«small class-"message-preview"»[(thread.lastMessage.text]))«/small» 
«/div» 
«a (click)="clicked($event)" class-"div-link"»Select«/a» 
«/div» 


}) 

export class ChatThread implements OnInit { 
thread: Thread; 
selected: boolean = false; 


constructor(private threadsService: ThreadsService) { 


} 


ngOnInit(): void { 
this.threadsService.currentThread 
.subscribe( (currentThread: Thread) => { 
this.selected = currentThread && 
this.thread && 
(currentThread.id === this.thread.id); 
J); 
} 


clicked(event: any): void { 
this.threadsService.setCurrentThread(this. thread) ; 
event. preventDefault(); 


} 
} 


11.4 ChatWindow 组 件 


ChatWindow 是 此 应 用 中 最 复杂 的 组 件 ( 如 图 11-3 所 示 ) 我 们 一 步 一 步 来 完成 它 。 


Chat - Reverse Bot 
I'll reverse whatever you send me n 


Write your message here. ES 


图 11-3 ”聊天 窗口 





y 
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首先 从 定义 6@Component 开始。 


code/rxjs/chat/app/ts/components/ChatWindow.ts 


@Component ( f 
selector: 'chat-window', 
changeDetection: ChangeDetectionStrategy.OnPush, 


11.4.4 ChatWindow 组 件 类 属性 


Chatwindow 类 有 四 个 属性 。 





code/rxjs/chat/app/ts/components/ChatWindow.ts 


export class ChatWindow implements OnInit { 
messages: Observable«any»; 
currentThread: Thread; 
draftMessage: Message; 
currentUser: User; 


11-4 表 明了 每 一 个 属性 在 何 处 使 用 。 








currentThread | DEET 
I'll reverse whatever you send me n mes S ages 


currentUser 





Write your message here... draftMessage 














图 11-4 聊天 窗口 的 属性 
我 们 会 在 constructor 中 注入 四 样 东 西 。 








code/rxjs/chat/app/ts/components/ChatWindow.ts 


constructor(private messagesService: MessagesService, 
private threadsService: ThreadsService, 
private userService: UserService, 
private el: ElementRef) { 


} 


前 面 的 三 个 都 是 我 们 创建 的 服务 。 最 后 的 el 是 一 个 ElementRef 对 象 ， 可 以 获取 当前 的 宿主 
DOM 元 素 。 当 创建 和 接收 新 消息 时 ， 我 们 会 使 用 它 把 聊天 窗口 滚动 到 底部 。 

















e 
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请 记 住 : 通过 在 构造 函数 中 使 用 public messagesService: MessagesService 
í it H 





我 们 在 注入 MessagesService 的 同时 创建 了 一 个 实例 
中 通过 this. messagesService 来 使 用 


11.4.2 ChatWindow 的 ngOnInit 


量 可 以 在 类 
的 可 观察 对 象 创建 订阅 。 


: void { 





我 们 会 把 这 个 组 件 的 初始 化 放 在 ngonInit 中 。 在 这 里 主要 要 做 的 是 , 对 于 可 以 改变 组 件 


code/rxjs/chat/app/ts/components/ChatWindow.ts 
ngOnInit(): 








this.messages = this. threadsService.currentThreadMessages 
this.draftMessage = new Message( ) 
* 


首先 ， 我 们 会 把 currentThreadMessages 保 存 到 messages 属 性 中 。 接 下 来 ， 创 建 一 
Message 实 例 作 为 draftMessage 属 性 的 默 ; 
当 发 送 一 条 新 消息 

















默认 值 。 
为 这 个 要 发 送 的 会 








个 空 的 
的 时 候 ， 需要 确保 这 个 Message 保 存 了 一 份 将 要 发 送 的 Thread 的 引用 。 
话 会 成 为 当前 会 话 ， 所 以 我 们 保存 了 当前 已 选 会 话 的 引用 。 

code/rxjs/chat/app/ts/components/ChatWindow.ts 

this.threadsService.currentThread.subscribe( 
(thread: Thread) => ( 

this.currentThread - thread 
F) 
我 们 还 希望 新 消息 





subscr ibe( 
(user: 


\ 是 由 当前 用 户 发 送 的 ， 所 以 对 currentUser 做 了 同样 的 事 。 
code/rxjs/chat/app/ts/components/ChatWindow.ts 
this.userService. currentUser 


User) => { 
this.currentUser = user 
ID 





11.4.3 ChatWindow 的 sendMessage 
既然 讨论 到 这 


: void { 
let m: 


了 ， 那 就 来 实现 sendMessage 方 法 ， 它 可 以 发 送 一 条 
code/rxjs/chat/app/ts/components/ChatWindow.ts 
sendMessage( ) 


HH o 
Message - this.draftMessage 
m.author - this.currentUser 


m.thread - this.currentThread 
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m.isRead = true; 
this.messagesService.addMessage(m) ; 
this.draftMessage = new Message(); 


} 
sendMessage 函数 先 获 取 dra ftMessage 并 用 组 件 属性 设置 了 author 和 thread 属 性 ,每 条 已 发 
送 的 信息 其 实 都 已 经 被 读 过 了 因为 是 我 们 写 的 )， 所 以 将 其 标记 为 已 读 。 
注意 ， 我 们 没有 更 新 qraftMessage 的 文本 。 这 是 因为 很 快 就 会 将 qraftMessage 的 文本 值 绑 
定 到 视图 中 。 
当 dqraftMessage 属 性 更 新 后 ,我们 将 它 发 送 给 messagesService ,然后 创建 一 个 新 的 Message 
对 象 并 赋值 给 this.draftMessage。 这 样 做 是 为 了 确保 不 会 改变 已 发 送出 去 的 消息 。 












































du 














11.4.4 ChatWindow 的 onEnter 
在 视图 中 ， 我 们 希望 在 下 面 两 种 场景 发 送 消息 : 
(1) 用 户 点 击 Send 按 钮 ; 
(2) 用 户 敲 击 回 车 键 。 
我 们 定义 一 个 函数 来 处 理 这 两 种 事件 。 


code/rxjs/chat/app/ts/components/ChatWindow.ts 





T 





onEnter(event: any): void { 
this.sendMessage(); 
event.preventDefault(); 


} 


11.4.5 ChatWindow 的 scrollToBottom 


4 ARR MA MCE — AA EIN, FATTER oh SUA ARR. Du gt Ef EDU ER 
scrol 1Top 属 性 。 











code/rxjs/chat/app/ts/components/ChatWindow.ts 


scrollToBottom(): void { 
let scrollPane: any = this.el 
.nativeElement.querySelector('.msg-container-base'); 
scrollPane.scrollTop - scrollPane.scrollHeight; 


j 
现在 有 了 滚动 到 底部 的 函数 , 还 需要 确保 在 恰当 的 时 间 调 用 它 。 回 到 ngonInit 方 法 中 , 订阅 
currentThreadMessages 的 消息 集合 并 在 得 到 一 条 新 消息 的 时 候 滚动 到 底部 。 


code/rxjs/chat/app/ts/components/ChatWindow.ts 























this .messages 
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.subscribe( 
(messages: Array«Message») => { 
setTimeout(() => { 
this.scrollToBottom(); 
; 
}); 


o 为 什么 要 使 用 setTimeout? 
如 果 我 们 得 到 新 消息 时 立即 调用 scroll1ToBottom， 那么 滚动 到 底部 的 动作 就 是 
在 新 消息 泻 染 完成 之 前 执行 的 。 使 用 setTimeout 可 以 告诉 JavaScript 我 们 要 在 当 
前 执行 队列 完成 后 再 运行 这 个 函数 。 该 函数 会 在 组 件 演 染 完成 之 后 执行 ， 这 正 
是 我 们 想 要 的 效果 。 


11.4.6 ChatWindow 的 template 
template 的 开头 部 分 看 起 来 应 该 很 眼熟 ， 我 们 定义 了 一 些 标记 和 面板 标题 。 


code/rxjs/chat/app/ts/components/ChatWindow.ts 


@Component ( f 

selector: 'chat-window', 

changeDetection: ChangeDetectionStrategy.OnPush, 

template: ^ 

«div classz"chat-window-container"» 
«div classz"chat-window"» 
«div class="panel-container"> 
«div class="panel panel-default"» 


«div classz"panel-heading top-bar"» 
«div class="panel-title-container"> 
«h3 class-"panel-title"» 
«span class="glyphicon glyphicon-comment"»«/span» 
Chat - {{currentThread.name} } 
«/h3» 
«/div» 
«div classz"panel-buttons-container"» 
<!-- you could put minimize or close buttons here --» 
«/div» 
«/div» 


接 下 来 显示 消息 列表 。 这 里 使 用 带 async 管 道 的 ngFor 指 令 来 遍历 消息 列表 。 我 们 很 快 就 会 
讲解 单个 的 chat-message 组 件 。 











code/rxjs/chat/app/ts/components/ChatWindow.ts 


«div classz"panel-body msg-container-base"» 
«chat-message 
xngFor-"let message of messages | async" 
[message]-"message"» 
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«/chat-message» 


«/div» 








最 后 是 消息 输入 框 和 各 个 结束 标签 。 





code/rxjs/chat/app/ts/components/ChatWindow.ts 


<div class-"panel-footer"» 
«div class="input-group"> 


<input type=" 


text" 


class="chat-input" 

placeholder="Write your message here..." 
(keydown. enter )="onEnter($event)" 
[(ngModel )]="draftMessage. text" /> 


<span class=" 


input-group-btn"> 


«button class="btn-chat" 


(click)=" 


onEnter($event)" 


»Send«/button» 


«/span» 
«/div» 
«/div» 


«/div» 
«/div» 
«/div» 
«/div» 




















消息 输入 框 是 视图 中 最 有 意思 的 部 分 ,我 们 来 看 看 其 中 两 个 有 趣 的 属性 : (keydown enter ) 





和 [(ngModel)] 。 


11.4.7 “处 理 键盘 动作 

















Angular 提 供 了 一 种 简明 的 方式 来 处 理 键盘 动作 : 在 元 素 上 绑 定 事件 。 在 这 个 例子 中 ,我 们 
HRE T keydown .enter。 这 表示 如 果 用 户 按 下 回 车 键 , 就 会 调用 表达 式 里 的 函数 onEnter($event ) 。 








code/rxjs/chat/app/ts/components/ChatWindow.ts 


<input type=" 





text" 


class="chat-input" 

placeholder="Write your message here..." 
(keydown. enter )="onEnter ($event)" 
[(ngModel )]="draftMessage.text" /> 


11.4.8 使 用 ngModel 


如 前 所 述 ，Angular 并 没有 把 双向 绑 定 作为 一 般 模 式 。 然 而 ， 组 件 和 组 件 对 应 视图 之 间 的 双 
向 绑 定 是 非常 有 用 的 。 只 要 把 双向 绑 定 的 副作用 限制 在 组 件 之 中 , 那么 保持 一 个 组 件 属性 和 视图 





中 同步 还 是 非常 方便 的 。 
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在 这 个 例子 中 , 我 们 在 输入 框 的 值 和 qdqraftMessage.text 之 间 建 立 了 一 个 双向 绑 定 。 如 果 在 


输入 框 中 输入 文字 ，draftMessage .text 就 会 自动 设置 为 输入 的 文字 。 同 样 ， 如 果 在 代码 中 更 新 
draftMessage.text， 那 么 视图 中 输入 框 的 值 也 会 随 之 改变 。 











code/rxjs/chat/app/ts/components/ChatWindow.ts 
<input type="text" 
class="chat-input" 
placeholder="Write your message here..." 


(keydown. enter )="onEnter ($event )" 
[(ngModel ) ]="draftMessage.text" /> 


11.4.9 Ai Send 按钮 
在 Send 按 钮 上 将 (click) 属 | 








puts 


EBB xe BHP AYonEnter PAZ s 
code/rxjs/chat/app/ts/components/ChatWindow.ts 


«span class-"input-group-btn"» 
«button class="btn-chat" 
(click)="onEnter($event)" 
»Send«/button» 
«/span» 


11.4.10 “完整 的 ChatWindow 组 件 

















下 面 是 Chatwindow 组 件 的 完整 代码 清单 。 





code/rxjs/chat/app/ts/components/ChatWindow.ts 
@Component ( f 
selector: 'chat-window', 


changeDetection: ChangeDetectionStrategy.OnPush, 
template: ^ 





«div classz"chat-window-container"» 
«div class-z"chat-window"» 
«div classz"panel-container"» 
«div class="panel panel-default"» 


«div classz"panel-heading top-bar"» 
«div class="panel-title-container"> 
«h3 class-"panel-title"» 


«span class="glyphicon glyphicon-comment"»«/span» 
Chat - {{currentThread.name} } 


«/h3» 
«/div» 
«div classz"panel-buttons-container"» 

<!-- you could put minimize or close buttons here --» 
«/div» 


«/div» 
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«div class-"panel-body msg-container-base"» 
«chat-message 
xngFor-"let message of messages | async" 
[message]-"message"» 
«/chat-message» 
«/div» 


«div class-"panel-footer"» 
«div classz"input-group"» 
«input type="text" 
class="chat-input" 
placeholder="Write your message here..." 
(keydown. enter )="onEnter($event)" 
[(ngModel )]="draftMessage.text" /> 
«span class="input-group-btn"> 
«button classz"btn-chat" 
(click)="onEnter ($event)" 
»Send«/button» 
«/span» 
«/div» 
«/div» 


«/div» 
«/div» 
«/div» 
«/div» 


}) 
export class ChatWindow implements OnInit { 
messages: Observable«any»; 
currentThread: Thread; 
draftMessage: Message; 
currentUser: User; 


constructor(private messagesService: MessagesService, 
private threadsService: ThreadsService, 
private userService: UserService, 
private el: ElementRef) { 


ngOnInit(): void { 
this.messages - this.threadsService.currentThreadMessages; 


this.draftMessage - new Message(); 


this.threadsService.currentThread.subscribe( 
(thread: Thread) => { 
this.currentThread - thread; 


IDE 


this.userService.currentUser 
.subscribe( 
(user: User) => { 
this.currentUser = user; 
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IDE 


this.messages 
.subscribe( 
(messages: Array«Message») => { 
setTimeout(() => ( 
this.scrollToBottom(); 

}); 

p 

} 


onEnter(event: any): void { 
this.sendMessage(); 
event.preventDefault(); 


} 


sendMessage(): void { 
let m: Message = this.draftMessage; 
m.author = this.currentUser; 
m.thread = this.currentThread; 
m.isRead = true; 
this.messagesService.addMessage(m) ; 
this.draftMessage = new Message(); 


} 


scrollToBottom(): void { 
let scrollPane: any = this.el 
.nativeElement.querySelector('.msg-container-base'); 
scrollPane.scrollTop - scrollPane.scrollHeight; 


j 


11.5 ChatMessage 组 件 





每 条 消息 都 是 通过 ChatMessage 组 件 泻 染 的 ， 如 图 11-$ 所 示 。 




















该 组 件 相对 简明 ， 其 主要 逻辑 是 根据 消息 是 否 由 当前 用 户 所 创建 来 泻 染 出 略 有 不 同 的 视 几 。 











如 果 该 消息 不 是 当前 用 户 创建 的 ， 就 认为 消息 是 收 到 的 (incoming ). 
我 们 先 从 定义 ecCcomponent 开始。 


code/rxjs/chat/app/ts/components/ChatWindow.ts 


@Component ( f 
inputs: ['message'], 
selector: 'chat-message', 
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Chat - Reverse Bot 
e" ChatMessage 
or 


st n ChatMessage 
| Write your message here... ES 


图 11-5 ChatMessage 组 件 














11.5.1 设置 incoming 属性 


记 住 ， 每 个 chatMessage 组 件 都 属于 一 条 Message 。 因 此 ， 要 在 ngonInit 方 法 里 订阅 
currentUser 流 并 根据 这 条 Message 是 否 由 当前 用 户 所 创建 来 设置 incoming。 











code/rxjs/chat/app/ts/components/ChatWindow.ts 


export class ChatMessage implements OnInit { 
message: Message; 
currentUser: User; 
incoming: boolean; 


constructor(private userService: UserService) ( 


} 


ngOnInit(): void { 
this.userService.currentUser 
. subscr ibe( 
(user: User) => { 
this.currentUser = user; 
if (this.message.author && user) { 
this.incoming = this.message.author.id !== user.id; 


DP 


11.5.2 ChatMessage AY template 
在 template 中 有 两 处 值得 注意 : 
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(1) FromNowPipe 管 道 


E 
B | 


先 来 看 看 它 的 代码 。 


code/rxjs/chat/app/ts/components/ChatWindow.ts 








(2) [ngClass] 


本 


@Component ( f 
inputs: ['message'], 
selector: 'chat-message', 
template: ~ 
«div class="msg-container" 
[ngClass]="{'base-sent': !incoming, 'base-receive': incoming}"> 


<div class="avatar" 
angI f="! incoming"> 
<img src="{{message.author.avatarSrc}}"> 
</div> 


<div class="messages" 
[ngClass]="{'msg-sent': !incoming, 'msg-receive': incoming}"> 
<p>{{message.text}}</p> 
<p class="time">{{message.author.name}} e {{message.sentAt | fromNow}}</p> 
</div> 


<div class="avatar" 
«ngI f="incoming"> 
<img src="{{message.author.avatarSrc}}"> 
</div> 
</div> 


}) 
FromNowPipe 是 一 个 管道 , 把 消息 的 发 送 时 间 转 换 为 像 “x 秒 前 ”这 样 对 用 户 友好 的 信息 。 如 am 
你 所 见 ， 我 们 要 这 样 用 它 : {{message.sentAt | fromNow]]. 














14 


e FromNowPipe 使 用 优秀 的 moment . js "类 库 。 如 果 你 想 学 习 如 何 创 建 自 定义 管道 ， 
可 以 阅读 FromNowPipe 的 源 代 码 : code/rxjs/chat/app/ts/util/FromNowPipe.ts. 





我 们 也 在 视图 中 充分 利用 了 ngclass 。 当 这 样 写 时 : 


[ngClass]="{'msg-sent': !incoming, 'msg-receive': incoming}" 
我 们 是 在 告诉 Angular， 如 果 incoming 为 真 就 使 用 msg-receive 类 ( 否则 使 用 msg-sent 类 )。 
借助 incoming 属 性 ， 我 们 就 能 以 不 同 的 形式 来 显示 收 到 和 发 出 的 消息 。 






































(D http://momentjs.com/ 
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11.5.3 ”完整 的 ChatMessage 代码 清 


下 面 是 完整 的 ChatMessage 组 件 。 





code/rxjs/chat/app/ts/components/ChatWindow.ts 


import { 
Component, 
OnInit, 
ElementRef, 
ChangeDetectionStrategy 
} from 'Gangular/core'; 
import { 
MessagesService, 
ThreadsService, 
UserService 
} from '../services/services'; 
import {Observable} from 'rxjs'; 
import {User, Thread, Message} from '../models'; 


@Component ( { 
inputs: ['message'], 
selector: 'chat-message', 
template: ^ 
«div class-"msg-container" 
[ngClass]="{'base-sent': !incoming, 'base-receive': incoming}"> 


«div class="avatar" 
xngIf="!incoming"> 
<img src="{{message.author.avatarSrc}}"> 
</div> 


<div class="messages" 
[ngClass]="{'msg-sent': !incoming, 'msg-receive': incoming}"> 
<p> {{message.text}}</p> 


«p class="time">{{message.author.name}} e {{message.sentAt | fromNow}}</p> 
</div> 


<div class="avatar" 
xngIf="incoming"> 
<img src="{{message.author.avatarSrc}}"> 
</div> 
</div> 
}) 
export class ChatMessage implements OnInit { 
message: Message; 
currentUser: User; 
incoming: boolean; 


constructor(private userService: UserService) { 


} 
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ngOnInit(): void { 
this.userService.currentUser 
.subscribe( 
(user: User) => { 
this.currentUser = user; 
if (this.message.author && user) { 
this.incoming = this.message.author.id !== user.id; 


E 


@Component ( f 

selector: 'chat-window', 

changeDetection: ChangeDetectionStrategy.OnPush, 

template: ^ 

«div classz"chat-window-container"» 
«div class="chat-—window"> 
«div classz"panel-container"» 
«div class="panel panel-default"» 


«div classz"panel-heading top-bar"» 
«div class="panel-title-container"> 
«h3 class-"panel-title"» 
«span class="glyphicon glyphicon-comment"»«/span» 
Chat - {{currentThread.name} } 
«/h3» 
«/div» 
«div classz"panel-buttons-container"» 
<!-- you could put minimize or close buttons here -—» 
</div> 
</div> 


«div classz"panel-body msg-container-base"» 
«chat-message 
xngFor-"let message of messages | async" 
[message]-"message"» 
«/chat-message» 
«/div» 


«div class-"panel-footer"» 
«div class="input-—group"> 
«input type="text" 
class="chat-input" 
placeholder="Write your message here..." 
(keydown. enter )="onEnter ($event)" 
[(ngModel ) ]="draftMessage.text" /> 
<span class="input-group—btn" > 
«button class="btn-chat" 
(click)="onEnter($event)" 
»Send«/button» 
«/span» 
«/div» 
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</div> 


</div> 
</div> 
</div> 
</div> 


}) 
export class ChatWindow implements OnInit { 
messages: Observable«any»; 
currentThread: Thread; 
draftMessage: Message; 
currentUser: User; 


constructor(private messagesService: MessagesService, 
private threadsService: ThreadsService, 
private userService: UserService, 
private el: ElementRef) { 


ngOnInit(): void { 
this.messages - this.threadsService.currentThreadMessages; 


this.draftMessage - new Message(); 


this.threadsService.currentThread.subscribe( 
(thread: Thread) => ( 
this.currentThread - thread; 


}); 


this.userService.currentUser 
.subscribe( 
(user: User) => { 
this.currentUser = user; 


P 


this.messages 
.subscribe( 
(messages: Array«Message») => { 
setTimeout(() => ( 
this.scrollToBottom(); 
IDE 
p 


onEnter(event: any): void { 
this.sendMessage(); 
event.preventDefault(); 


} 


sendMessage(): void { 
let m: Message = this.draftMessage; 
m.author = this.currentUser ; 
m.thread = this.currentThread; 
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m.isRead = true; 
this.messagesService.addMessage(m) ; 
this.draftMessage = new Message(); 


j 
scrollToBottom(): void { 
let scrollPane: any - this.el 


.nativeElement.querySelector('.msg-container-base'); 
scrollPane.scrollTop - scrollPane.scrollHeight; 


j 


11.6 ChatNavBar 组 件 


我 们 要 讨论 的 最 后 一 个 组 件 是 chatNavBar 。 导 航 条 中 会 显示 当前 用 户 的 未 读 消息 数 ， 如 图 
11-6 所 示 。 


MEE Echo Bot e 





图 11-6 ChatNavBar 组 件 中 的 未 读数 


Q, 试验 未 读 消息 数量 最 好 的 办 法 是 使 用 等 待机 器 人 (Waiting Bot )。 如 何 你 还 没有 
试 过 ， 尝 试 发 消息 “3” 给 等 待机 器 人 ， 然 后 切换 到 其 他 聊天 窗口 。 等 待机 器 人 
会 等 3 秒 再 给 你 回复 消息 ， 这 样 你 就 会 看 到 未 读 消息 数量 的 增长 。 





11.6.1 ChatNavBar 的 eComponent 
首先 ， 我 们 定义 了 非常 简单 的 ecomponent 配 置 。 


code/rxjs/chat/app/ts/components/ChatNavBar.ts 





@Component ( f 
selector: 'nav-bar', 


11.6.2 ChatNavBar 控制 器 
需要 做 的 就 是 记录 unreadMessagesCount 属性 。 这 其 实 比 表面 看 上 去 











ChatNavBar 控 制 器 唯 
稍微 复杂 一 些 。 

最 简明 的 方式 就 是 监听 messagesService.messages ， 然 后 计算 属性 isRead 是 false 的 
Messages 数 量 总 和 。 对 于 当前 会 话 外 的 所 有 消息 ， 这 种 方法 可 以 正常 工作 。 人 然而， 当 messages 
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流 发 出 新 值 时 ， 无 法 保证 当前 会 话 的 新 消息 被 标记 为 已 读 。 

最 安全 的 方式 就 合并 messages 流 和 currentThread 流 , 以 确保 不 会 把 任何 属于 当前 会 话 的 消 
息 算 入 总 数 。 

我 们 用 combineLatest 操 作 符 来 进行 实现 ( 本 章 前 面 也 使 用 过 它 )。 


code/rxjs/chat/app/ts/components/ChatNavBar.ts 








export class ChatNavBar implements OnInit { 
unreadMessagesCount: number ; 


constructor(private messagesService: MessagesService, 
private threadsService: ThreadsService) { 


} 


ngOnInit(): void { 
this.messagesService.messages 


.combineLatest( 
this.threadsService.currentThread, 
(messages: Message[], currentThread: Thread) => 


[currentThread, messages] ) 


.subscribe(([currentThread, messages]: [Thread, Message[]]) => { 
this.unreadMessagesCount - 
_.reduce( 
messages, 
(sum: number, m: Message) => { 
let messageIsInCurrentThread: boolean = m.thread && 
currentThread && 
(currentThread.id === m.thread.id); 
if (m && !m.isRead && !messageIsInCurrentThread) { 
sum = sum + 1; 
j 
return sum; 
) 
0); 
3 
} 
} 


如 果 你 不 熟悉 TypeScript 的 话 ， 会 觉得 上 面 的 语法 有 些 不 太 容 易 理 解 。 我们 在 combineLatest 
回调 函数 中 返回 了 一 个 数组 ， 这 个 数组 包含 两 个 元 素 : currentThread 和 messages。 

然后 我 们 订阅 了 combineLatest 操 作 符 返回 的 流 ， 在 函数 调用 中 解构 这 些 对 象 。 接 下 来 ， 我 
们 用 reduce 化 简 了 messages 集 合 ， 对 所 有 未 读 并 且 不 属于 当前 会 话 的 消息 进行 计数 。 

















11.6.3 ChatNavBar 的 template 
在 视图 中 ， 唯 一 需要 做 的 事 就 是 显示 unreadMessagesCount 属 性 。 











11.6 ChatNavBar 组 件 
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code/rxjs/chat/app/ts/components/ChatNavBar.ts 


@Component ( f 
selector: 'nav-bar', 
template: ^ 
«nav class="navbar navbar-default"» 
«div class-"container-fluid"» 
«div class-"navbar-header"» 
«a class-"navbar-brand" hrefz"https://ng-book.com/2"» 
<img src-"$(require('images/1ogos/ng-book-2-minibook.png')]"/» 
ng-book 2 
«/a» 
«/div» 
«p class="navbar-text navbar-right"» 
«button class="btn btn-primary" type="button"> 


Messages «span class-"badge"»[(unreadMessagesCount]] «/span» 
«/button» 


«/p» 
«/div» 
«/nav» 


11.6.4 “完整 的 ChatNavBar 组 件 

















下 面 是 完整 的 ChatNavBar 组 件 代 码 清 单 。 


code/rxjs/chat/app/ts/components/ChatNavBar.ts 


import {Component, OnInit} from 'Gangular/core'; 

import {MessagesService, ThreadsService} from '../services/services'; 
import (Message, Thread} from '../models'; 

import x as _ from 'underscore'; 


GComponent ( f 
selector: 'nav-bar', 
template: ^ 
«nav class="navbar navbar-default"» 
«div class="container-fluid"> 
«div class="navbar-header" > 
<a class-"navbar-brand" href="https://ng-book.com/2"> 
<img src-"$(require('images/1ogos/ng-book-2-minibook.png')]"/» 
ng-book 2 
</a> 
</div> 
«p class="navbar-text navbar-right"» 
«button class="btn btn-primary" type="button"> 


Messages «span class-"badge"»[(unreadMessagesCount]] «/span» 
«/button» 


«/p» 
«/div» 
«/nav» 


}) 
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export class ChatNavBar implements OnInit { 
unreadMessagesCount: number; 


constructor(private messagesService: MessagesService, 
private threadsService: ThreadsService) { 
j 


ngOnInit(): void { 
this.messagesService.messages 
.combineLatest( 
this.threadsService.currentThread, 


(messages: Message[], currentThread: Thread) => 
[currentThread, messages] ) 


.subscribe(([currentThread, messages]: 
this.unreadMessagesCount - 
_.reduce( 
messages, 
(sum: number, m: Message) => { 
let messageIsInCurrentThread: boolean = m.thread && 
currentThread && 
(currentThread.id === m.thread.id); 


[Thread, Message[]]) => { 


if (m && !m.isRead && !messageIsInCurrentThread) { 
sum = sum + 1; 
j 


return sum; 


11.7 i£ 














好 了 ,把 








它们 全 部 放 在 一 起 ， 就 是 一 个 完整 的 聊天 应 用 了 如 图 11-7 所 示 )! 


查看 文件 code/redux/angular2-redux-chat/app/ts/ChatExampleData.ts, 你 会 发 现 我 们 已 经 写 好 了 





b 


量 可 以 跟 你 聊天 的 机 器 人 。 下 面 是 从 反 转 机 器 人 中 截取 的 一 些 代码 : 

















let rev: User = new User("Reverse Bot", require("images/avatars/female-avatar-4.png")); 
let tRev: Thread = new Thread("tRev", rev.name, rev.avatarSrc); 


code/rxjs/chat/app/ts/ChatExampleData.ts 


messagesService.messagesForThreadUser(tRev, rev) 
.forEach( (message: Message): void => { 
messagesService.addMessage( 
new Message( { 
author: rev 


, 


text: message.text.split('').reverse().join(''), 
thread: tRev 


}) 





@ © @ ， 门 Angular2 - Chat with Rxus x | Blank | 











€ > Œ [)localhost:8080 Wy) »| = 


Echo Bot * 
I'll echo whatever you send me 
Reverse Bot 

“1 reverse whatever you send me 


Waiting Bot 
dil "wait however many seconds you send to me before responding. Try sending '3' 


Lady Capulet 
So shall you feel the loss, but not the friend which you weep for. 





Wi Chat - Echo Bot 


I'll echo whatever you n 
send me 





图 11-7 ”完成 后 的 聊天 应 用 


如 你 所 见 , 我 们 已 经 通过 messagesForThreadUser 方 法 为 反 转 机 器 人 订阅 了 消息 。 你 可 以 试 
着 写 几 个 自己 的 机 器 人 。 


11.8 ”更 进一步 E 


改进 这 个 聊天 应 用 的 一 些 方法 包括 加 强 RxJS 的 使 用 并 连接 到 一 个 真实 的 API。 发 起 API 请 求 
的 方法 我 们 已 经 在 第 6 章 中 讨论 过 了 。 眼 下 请 尽情 享受 你 的 聊天 应 用 吧 ! 

















基于 TypeScript 的 Redux 
简介 











本 章 及 下 一 章 将 着 眼 于 一 种 叫 作 Redux 的 数据 架构 。 本 章 将 讨论 Redux 背 后 的 理念 , 建造 一 
个 自己 的 迷你 版 Redux 并 把 它 连接 到 Angular。 在 下 一 章 中 ， 我 们 将 使 用 Redux 构 建 一 个 更 大 的 
应 用 fe} 


到 目前 为 止 ,我们 的 大 多 数 项 目 都 在 通过 一 种 相当 直接 的 方式 管理 状态 :从 服务 中 获取 数据 ， 
然后 在 组 件 中 泻 染 数据 。 在 组 件 树 中 ， 值 是 沿 着 自 上 而 下 的 方向 传递 的 。 


对 于 比较 小 的 应 用 来 说 , 这 种 管理 方式 已 经 足够 了 ; 但 随 着 应 用 的 成 长 ， 让 多 个 组 件 来 管理 
状态 的 不 同 部 分 将 变 得 难以 处 理 。 比 如 ， 通 过 组 件 树 向 下 传递 所 有 值 的 方式 有 如 下 缺点 。 


O 属性 的 间接 传递 为 了 让 任何 组 件 都 可 以 获取 到 应 用 的 状态 ， 我 们 不 得 不 通过 inputs 属 
性 向 下 传递 值 。 这 意味 着 我 们 会 借助 很 多 中 间 组 件 来 传递 状态 ， 而 这 些 中 间 组 件 既 不 使 
用 也 不 关心 传递 的 状态 。 
O HR UE: 传递 inputs 属 性 时 要 贯穿 整个 组 件 树 ， 从 而 导致 父子 组 件 之 间 产生 耦合 ， 
而 这 此 耦合 通 常 都 是 不 必要 的 。 这 样 ， 试 图 把 一 个 子 组 件 放 入 组 件 树 的 其 他 层级 中 会 变 
得 非常 困难 ， 因 为 我 们 必须 修改 所 有 新 的 父 级 组 件 来 传递 状态 。 
O 状态 树 和 DOM 树 不 匹配 : 状态 的 “形状 ”往往 和 视图 /组 件 层级 的 “形状 ”不 匹配 。 当 我 
们 需要 引用 组 件 树 一 个 较 远 分 支 中 的 数据 时 ， 通 过 组 件 树 的 属性 来 传递 所 有 值 就 会 使 我 
们 陷入 困境 。 
O 应 用 中 到 处 都 是 状态 如 果 通 过 组 件 来 管理 状态 ， 就 很 难 获取 应 用 整体 状态 的 快照 。 因 
此 很 难 知道 哪个 组 件 “ 拥 有 ”一 条 特定 的 数据 以 及 哪些 组 件 关心 该 数据 的 变化 
把 数据 从 组 件 中 提取 出 来 并 放 到 服务 中 会 有 很 大 的 帮助 ,至 少 , 如果 服 务 是 数据 的 “拥有 者 ”, 
那么 对 于 把 数据 放 在 哪里 ,我 们 就 有 更 清晰 的 概念 。 但 这 也 带 来 了 一 个 新 问题 关于 “让 服务 拥 
有 数据 ”的 最 佳 实践 又 是 什么 呢 ? 有 什么 可 以 遵循 的 模式 吗 ?当然 有 1! 
本 章 会 讨论 一 种 叫 作 Redux 的 数据 架构 模式 ， 其 设计 初衷 就 是 要 解决 这 些 问题 。 我 们 将 自己 
实现 一 个 Redux， 它 会 把 所 有 的 状态 都 存储 在 一 个 地 方 。 这 种 “把 所 有 应 用 状态 都 存在 同一 个 地 
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方 ”的 想法 乍 听 起 来 可 能 有 点 疯狂 ， 但 最 终 会 给 你 惊喜 。 





12.1 Redux 


如 果 你 还 没 听 说 过 Redux, 可 以 到 其 官网 http:/redux.js.org/ 查 看 相关 内 容 。 网 络 应 用 的 数据 架 
构 一 直 在 进化 , 搭建 数据 架构 的 传统 方式 已 经 不 能 很 好 地 适应 大 型 网 络 应 用 。 因 为 功能 强大 且 易 
于 理解 ，Redux 如 今 非常 流行 。 
数据 架构 是 一 个 复杂 的 话题 ， 而 Redux 的 最 大 优点 可 能 是 它 的 简单 性 。 如 果 把 Redux 剥 离 得 
只 剩 核心 代码 ， 其 代码 行 数 将 不 到 100 行 。 

通过 把 Redux 用 作 应 用 的 骨架 ， 我 们 可 以 构建 出 更 容易 理解 的 富 网 络 应 用 。 首 先 ， 我 们 来 看 
看 如 何 编写 一 个 迷你 版 Redux， 稍 后 再 把 这 些 概念 应 用 到 一 个 更 大 的 应 用 程序 中 ， 以 更 好 地 理解 
Redux 的 工作 模式 。 












































Q, 有 人 尝试 使 用 Redux 或 新 建 一 个 受 Redux 启 发 的 、 能 与 Angular 协 同 工 作 的 系统 。 
以 下 是 两 个 著名 的 例子 : 

口 ngrx/store” » 
O angular2-redux^ 
ngrx 是 一 个 受 Redux 启 发 的 架构 ， 也 是 可 观察 对 象 的 重度 使 用 者 。angular2- 
redux 则 依赖 于 Redux 并 添加 了 一 些 Angular 的 辅助 类 (依赖 注入 、 可 观察 对 象 包 
K) 
这 里 不 会 使 用 它们 。 为 了 在 不 引入 新 依赖 的 前 提 下 更 好 地 展示 概念 ， 我 们 将 直 
接 使 用 Redux。 当然 , 在 你 编写 自己 的 应 用 时 , 这 两 个 类 库 可 能 会 对 你 有 所 帮助 。 


Redux: 核心 概念 
Redux 的 核心 概念 有 : 


口 应 用 的 所 有 数据 都 放 在 一 个 叫 作 state 的 数据 结构 之 中 ， 而 state 存 放 在 store 中 ; 

a 应 用 从 store 中 读 取 state; 

O store 永 远 不 会 被 直接 修改 ; 

口 action 描 述 发 生 了 什么 ， 由 用 户 交 互 ( 和 其 他 代码 ) 触发 ; 

口 通过 调用 一 个 叫 作 reducer 的 函数 来 结合 旧 的 state 和 action 会 创建 出 新 的 state ( 如 图 12-1 所 
ZR Jo 
































(D https://github.com/ngrx/store 
© https://github.com/InfomediaL td/angular2-redux 
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Reducer() 





旧 的 state 








图 12-1 Redux 的 内 核 
如 果 以 上 几 点 还 不 够 清楚 的 话 ， 也 不 用 担心 。 本 章 的 其 余部 分 会 把 这 些 概 念 应 用 到 实践 中 。 


12.2 Redux 核心 概念 


12.2.1 reducer 是 什么 

我 们 先 来 讨论 reducer ( 归 集 器 )。reducer 的 概念 是 : 接收 旧 的 state 和 action 并 返回 新 的 state。 

reducer 必 须 是 一 个 纯 函数 ?>。 也 就 是 说 : 

(1) 它 不 能 直接 修改 当前 的 state; 

(2) 它 不 会 使 用 参数 之 外 的 任何 数据 。 

换 句 话说 ,一 个 纯 玉 数 在 参数 不 变 的 情况 下 ， 总 是 会 返回 同一 个 值 ; 而 日 纯 函数 不 会 调用 任 
何 会 对 外 界 产后 影响 的 函数 。 比 如 ， 没 有 数据 库 调 用 ， 没 有 HTTP 请 求 ， 也 不 会 改变 外 部 的 数据 
结构 。 

reducer 应 始终 把 当前 state 当 作 只 读 的 。reducer 不 应 该 改变 state， 而 是 应 该 返回 一 个 新 的 state。 
(通常 ， 新 的 state 会 从 复制 原 有 state 开 始 ， 但 我 们 不 应 该 自己 动手 复制 它 。) 


下 面 来 定义 我 们 的 第 一 个 reducer。 记 住 ，reducer 涉 及 以 下 三 点 。 
(1) Action: 定义 要 做 什么 (能 带 可 选 参数 )。 

Q)state: 存储 应 用 中 的 所 有 数据 。 

(3) Reducer : 接收 state 和 Action 并 返回 一 个 新 的 state。 














(D https://en.wikipedia.org/wiki/Pure_function 
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12.2.2 XE X. Action Ji Reducer 的 接口 


因为 我 们 使 用 TypeScript 是 为 了 确保 全 程 都 是 带 类 型 的 ,所 以 先 为 Action 和 Reducer 设 计 一 套 
接口 。 

1. Action 接 口 

Action 接 口 如 下 所 示 。 


code/redux/angular2-redux-chat/minimal/tutorial/01-identity-reducer.ts 




















interface Action { 
type: string; 
payload?: any; 

j 


注意 Action 有 了 两 个 字段 : 
(1) type 
(2) payload 


性 > Ah dD 


type 是 一 个 标识 字符 串 ， 用 来 描述 action 的 类 型 ， 比 如 INCREMENT 或 ADD_USER。payload 可 以 
是 任意 类 型 的 对 象 。 payload? 中 的 ?表示 这 文 个 字段 是 可 选 的 。 


2. Reducer 接 口 
Reducer 接 口 如 下 所 示 。 


code/redux/angular2-redux-chat/minimal/tutorial/01-identity-reducer.ts 











Bogs 






































interface Reducer<T> { 
(state: T, action: Action): T 
} 
Reducer 使 用 了 TypeScript 中 一 种 名 叫 泛 型 的 特性 。 在 这 个 例子 中 , ?就 是 state 的 类 型 。 注 意 ， 
这 里 我 们 要 表达 的 是 : 有 效 的 Reducer 就 是 一 个 国 数 ， 它 接收 state (类 型 为 ) 和 action 并 返回 
一 个 新 的 state (类 型 也 是 T )。 









































12.2.3 创建 第 一 个 Reducer 


最 简单 的 reducer 返 回 state 本 身 。( 可 以 把 它 叫 作 identity reducer, ， 因 为 它 在 state 上 应 用 了 
“identity 函 数 ”"。 这 也 是 所 有 reducer 的 默认 情况 ， 我 们 很 快 就 会 看 到 。) 


code/redux/angular2-redux-chat/minimal/tutorial/01-identity-reducer.ts 








let reducer: Reducer<number> = (state: number, action: Action) => { 
return state; 


hi 





(D https://en.wikipedia.org/wiki/Identity_function 


282 


Jc 


第 12% XT TypeScript 44 Redux 简介 





注意 ， 这 


文 个 Reducer 通 过 语法 Reducercnumbery 把 泛 型 中 的 类 型 固定 为 number 。 我 们 很 快 就 


定义 一 些 比 数字 更 复杂 ae 
我 们 还 没有 使 用 Action ， 但 已 经 可 以 试用 这 个 Reducer 了 。 


12.2.4 








运行 本 节 的 示例 

你 可 以 在 code/redux 文 件 夹 中 找到 本 章 的 代码 。 如 果 示 例 是 可 运行 的 ， 那么 你 就 
会 在 代码 块 上 方 看 到 文件 名 。 

在 本 节 中 ， 这 些 例子 是 在 浏览 器 之 外 通过 node.js 来 运行 的 。 因 为 这 些 例子 中 用 
的 是 TypeScript， 所 以 你 应 该 使 用 命令 行 工具 ts-node ( 而 不 是 直接 使 用 node ) 
来 运行 它们 。 

可 以 运行 下 面 的 命令 来 安装 ts-node : 


npm install -g ts-node 


也 可 以 在 coderredux/angular2-redux-chat 目录 下 运行 npm install, Ke 
Jf] . /node_modules/. aie node --noProject, 


比如 ， 要 运行 上 面 的 例子 ， 你 需要 输入 下 列 命令 (不 要 输入 $ 符 ): 


$ cd code/redux/angular2-redux-chat/minimal/tutorial 
$ ../../node modules/.bin/ts-node --noProject O1-identity-reducer.ts 


在 我 们 告诉 你 把 运行 环境 切换 到 浏览 器 之 前 ， 本 章 其 余 的 代码 也 都 用 同样 的 步 
又 运行 。 


运行 第 一 个 Reducer 


把 所 有 代码 整合 起 来 并 运行 这 个 reducer。 


code/redux/angular2-redux-chat/minimal/tutorial/01-identity-reducer.ts 





interface Action { 


type: 


string; 


payload?: any; 


} 


interface Reducer<T> { 
(state: T, action: Action): T 


} 


let reducer: Reducer<number> = (state: number, action: Action) => { 
return state; 


}; 


console.log( reducer(@, null) ); // -> 0 


运行 下 列 命令 : 
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$ cd code/redux/angular2-redux-chat/minimal/tutorial 
$ ../../node modules/.bin/ts-node --noProject O01-identity-reducer.ts 
[7] 


用 这 段 代码 作为 示例 似乎 有 点 傻 ， 但 它 教 给 了 我 们 reducer 的 第 一 条 原则 : 
默认 情况 下 ，reducer 返 回 state 本 身 。 


在 这 个 例子 中 , 我 们 传人 了 一 个 值 为 数字 @ 的 state 和 一 个 值 为 nul1 的 action。reducer 返 回 的 结 
果 是 值 为 数字 @ 的 state。 


但 是 我 们 还 要 做 一 些 更 有 趣 的 事 来 改变 state。 





























12.2.5 ”使 用 action 调整 计数 器 

我 们 最 终 的 state 会 远 比 一 个 数字 复杂 得 多 。 我 们 会 把 应 用 中 的 所 有 数据 都 保存 在 state 中 ， 
这 就 需要 为 最 终 的 state 设 计 一 种 更 好 的 数据 结构 。 

不 过 ， 目 前 使 用 一 个 数字 作为 state 可 以 让 我 们 专注 于 其 他 问题 。 因 此 我 们 先 沿用 这 种 做 法 ， 
state 仅 仅 是 一 个 用 来 存储 计数 器 的 数字 。 

假设 我 们 希望 改变 state 的 数值 。 记 住 ， 我 们 不 会 在 Redux 中 修改 state。 取 而 代 之 的 是 创建 
action， 用 来 告诉 reducer 如 何 生 成 一 个 新 的 state。 

证 我 们 创建 一 个 Action 来 改变 计数 器 。 要 记 住 ，Action 唯 一 的 必 选 属 ! 
以 像 这 样 来 定义 第 一 个 action: 

let incrementAction: Action = { type: 'INCREMENT' } 

我 们 还 应 该 创建 第 二 个 action， 它 负责 通知 reducer 让 计数 器 变 小 : 

let decrementAction: Action = { type: 'DECREMENT' } 


现在 有 了 这 些 action ， 我 们 来 试 试 在 reducer 中 使 用 它们 。 

















[E 


生 就 是 type 。 我 们 可 


























code/redux/angular2-redux-chat/minimal/tutorial/02-adjusting-reducer.ts 


let reducer: Reducer<number> = (state: number, action: Action) => { 


if (action.type === 'INCREMENT') { 
return state + 1; 

j 

if (action.type === 'DECREMENT') { 
return state - 1; 

j 


return state; 


Hh 
现在 可 以 试用 完整 的 reducer 了 。 
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code/redux/angular2-redux-chat/minimal/tutorial/02-adjusting-reducer.ts 
let incrementAction: Action = { type: 'INCREMENT' }; 


console.log( reducer(@, incrementAction )); // -> 1 
console.log( reducer(1, incrementAction )); // -» 2 


let decrementAction: Action = { type: 'DECREMENT' }; 


console.log( reducer(100, decrementAction )); // -> 99 


漂亮 ! 现在 会 根据 传 给 reducer 的 action 来 决定 返回 的 新 state 的 值 。 





12.2.6 reducer AY switch 
我 们 通常 把 reducer 的 主体 代码 换 成 switch 语 句 ， 而 不 是 一 大 堆 if。 























code/redux/angular2-redux-chat/minimal/tutorial/03-adjusting-reducer-switch.ts 


let reducer: Reducer<number> = (state: number, action: Action) => { 
switch (action.type) { 
case 'INCREMENT': 
return state + 1; 
case 'DECREMENT': 
return state - 1; 
default: 
return state; // <-- dont forget! 
j 


let incrementAction: Action = { type: 'INCREMENT' }; 
console.log(reducer(0, incrementAction)); // -> 1 
console.log(reducer(1, incrementAction)); // -> 2 


let decrementAction: Action = { type: 'DECREMENT' }; 
console.log(reducer(100, decrementAction)); // -» 99 


// any other action just returns the input state 
let unknownAction: Action = { type: 'UNKNOWN' }; 
console.log(reducer(100, unknownAction)); // -» 100 


注意 switch 语 名 的 default 分 支 要 返回 state 本 身 。 当 传人 一 个 未 知 的 action 时 ， 这 将 确保 程 
序 不 会 报错 而 且 我 们 能 得 到 原始 的 state 值 。 
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Q, H: 等 一 下 ! 难道 要 把 应 用 中 所 有 的 state 都 放 在 一 个 庞大 的 switch 语 句 中 吗 ? 
答 : 既是 又 不 是 。 

如 果 这 是 你 第 一 次 接触 Redux 的 reducer， 那么 “对 应 用 中 state 的 所 有 更 改 都 是 一 
个 庞大 switch 语 句 的 结果 ”可 能 会 让 你 感到 奇怪 。 你 应 该 知道 下 面 两 点 。 
(1) 在 一 个 地 方 集中 管理 state 的 变化 对 于 维护 程序 有 莫大 的 帮助 ， 具 体 来 说 是 因 
为 当 把 所 有 状态 都 集中 在 一 起 时 就 很 容易 查 出 哪里 发 生 了 变化 。( 此 外 , 你 可 以 
轻松 地 定位 state 的 变化 是 哪个 action 的 结果 ， 因 为 你 可 以 把 action 的 type 属 性 作 
为 关键 字 在 代码 中 进行 搜索 。) 
(2) 你 可 以 (而 且 经 常会 ) 将 reduer 分 解 成 若干 sub-reducer ( 子 reducer )， 它 们 各 
自负 责 管理 state 树 中 的 一 个 不 同 分 支 。 我 们 稍 后 会 进行 讨论 。 


12.2.7 action 的 “参数 ” 

















在 上 个 例子 中 ， 我 们 的 action 只 包含 一 个 type 属 性 ， 用 来 告诉 reducer 是 递增 还 是 递减 这 个 





state, 








然而 , 应 用 的 变化 通常 是 无 法 通过 单一 的 值 来 描述 清楚 的 ， 而 是 需要 一 些 参 数 来 描述 这 种 变 




















化 。 这 就 是 在 Action 里 有 pay1loaq 字 段 的 原因 aoe 





在 这 个 计数 器 示例 中 ， 如 果 我 们 想 要 让 计数 器 增加 9。 一 种 做 法 是 发 送 9 次 INCREMENT action, 





但 这 样 做 效率 太 低 ， 尤 其 是 在 想 增加 一 个 较 大 数值 的 时 候 ， 如 9000。 








替代 方案 是 增加 一 个 PLUS action。 它 用 pay1o0ad 参 数 来 发 送 一 个 数字 ， 这 个 数字 表示 计数 器 


要 增加 的 值 。 定 义 这 个 action 很 简单 : 


let plusSevenAction = { type: 'PLUS', payload: 7 }; 
接 下 来 ， 要 支持 这 个 action， 就 要 在 reducer 里 添加 一 个 新 的 case 分 支 来 处 理 PLUS action. 


code/redux/angular2-redux-chat/minimal/tutorial/04-plus-action.ts 


let reducer: Reducer«number» = (state: number, action: Action) => { 
switch (action.type) { 
case 'INCREMENT': 
return state + 1; 
case 'DECREMENT': 
return state - 1; 
case 'PLUS': 
return state + action.payload; 
default: 
return state; 
j 
F 
PLUS 分 支 会 把 action.payload 中 的 任何 数字 累加 到 state 上 。 下 面 来 试 试 看 。 
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code/redux/angular2-redux-chat/minimal/tutorial/04-plus-action.ts 

console.log( reducer(3, { type: 'PLUS', payload: 7}) ); // -> 10 

console.log( reducer(3, { type: 'PLUS', payload: 9000]) ); // -> 9003 

console.log( reducer(3, ( type: 'PLUS', payload: -2}) ); // -> 4 

我 们 在 第 一 行 接收 的 state 是 3， 然 后 加 上 7， 得 到 的 结果 是 16。 漂 亮 ! 不 过 ， 请 注意 当 我 们 传 
递 state 的 时 候 ， 它 并 没有 真 的 发 生变 化 。 也 就 是 说 ， 我 们 没有 保存 reducer 变 化 产生 的 结果 ， 不 
能 在 之 后 的 action 中 复 用 它 。 














12.3 保存 state 
这 些 reducer 都 是 纯 函 数 ， 不 会 改变 外 部 环境 。 问 题 在 于 ， 应 用 中 的 一 切 都 在 不 断 变化 。 特 别 
是 在 state 变 化 后 ， 我 们 必须 在 某 个 地 方 保留 这 个 新 的 state。 


在 Redux 中 ，state 是 保存 在 store 里 的 。store 负 责 运 行 reducer 然 后 保存 新 的 state。 我 们 来 看 一 个 
最 简单 的 store。 












































code/redux/angular2-redux-chat/minimal/tutorial/05-minimal-store.ts 


class Store«T» { 
private | state: T; 


constructor( 
private reducer: Reducer<T>, 
initialState: T 

drat 
this._state = initialState; 


} 


getState(): T { 
return this._state; 


} 


dispatch(action: Action): void { 
this._state = this.reducer(this._state, action); 
} 
} 


注意 Store 是 泛 型 的 ， 我 们 指定 state 的 类 型 为 泛 型 Tr， 并 用 私有 变量 _state 来 存储 state。 


Store 还 应 该 有 一 个 Reducer ， 它 同样 是 泛 型 的 ， 泛 型 的 类 型 是 T。 这 是 因为 每 个 store 都 和 一 
个 特定 的 reducer 紧 密 相 关 。 我 们 用 私有 变量 reducer 来 存储 这 个 Reducer 。 


























A 在 Redux 中 ， 每 个 应 用 通常 只 有 一 个 store 和 一 个 顶层 reducer。 


让 我 们 来 仔细 看 看 State 中 的 每 个 方法 : 
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O 在 构造 函数 中 把 _state 变 量 设置 为 初始 的 state; 
口 getState() 直 接 返 回 当前 的 _state 变 量 ; 
口 dispatch 接 收 一 个 action 并 把 它 传 给 reducer， 然 后 用 返回 值 来 更 新 _state 变 量 的 值 。 


注意 qispatch 方 法 不 返回 任何 值 。 它 只 更 新 store 中 的 state ( 结果 返回 之 后 )。 这 是 Redux 中 的 
一 条 重要 原则 : 分 发 (dispatch) action 是 一 种 “触发 并 忘记 ”的 策略 。 分 发 action 并 不 直接 操作 
state， 所 以 它 也 不 返回 新 的 state。 


当 我 们 分 发 action 的 时 候 ， 会 发 送 一 个 关于 发 生 了 什么 的 通知 。 如 果 想 要 了 解 系 统 的 当前 状 
态 ， 就 必须 检查 store 中 的 state。 












































12.3.1 使 用 store 
我 们 来 试 试 store。 


code/redux/angular2-redux-chat/minimal/tutorial/05-minimal-store.ts 


// create a new store 
let store - new Store«number»(reducer, 0); 
console.log(store.getState()); // -> 0 


store.dispatch({ type: 'INCREMENT' }); 
console. log(store.getState()); // -> 1 


store.dispatch({ type: 'INCREMENT' }); 
console. log(store.getState()); // -> 2 





store.dispatch({ type: 'DECREMENT' }); 
console. log(store.getState()); // -> 1 


先 创 建 一 个 新 的 Store 对 象 并 保存 在 store 变 量 中 。 我 们 可 以 使 用 这 个 变量 来 获取 当前 的 state 
并 且 分 发 action。 


state 初 始 值 为 6， 然后 进行 两 次 INCREMENT 、 一 次 DECREMENT ， 最 终 的 state 值 是 1。 

















12.3.2 ”使 用 subscribe 进行 通知 


Store 记 录 着 发 生 的 变化 ， 这 很 不 错 ; 但 是 在 上 个 示例 中 ， 我们 必须 用 store .getState() 询 
问 state 的 变化 。 如 果 一 个 新 的 action 分 发 后 能 立刻 让 我 们 知道 就 好 了 这 样 我 们 就 能 作出 响应 了 。 
要 做 到 这 一 点 ， 可 以 实现 观察 者 模式 (observer pattern )。 也 就 是 说 ， 我 们 会 注册 一 个 回调 函数 用 
来 订阅 所 有 的 变化 。 

我 们 希望 它 这 样 工作 : 

(1) 我 们 用 subscribe 注 册 一 个 监听 函数 ; 
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(2) 当 dispatch 被 调用 时 ,我们 遍历 所 有 的 监听 器 并 逐个 调用 它们 ， 它 们 会 负责 通知 大 家 这 
个 state 发 生 了 变化 。 


1. 注册 监听 器 
监听 回调 函数 是 没有 参数 的 函数 。 我 们 来 定义 一 个 接口 ， 以 便于 描述 。 





























code/redux/angular2-redux-chat/minimal/tutorial/06-store-w-subscribe.ts 
interface ListenerCallback { 

(): void; 

} 
订阅 一 个 监听 器 后 ， 我 们 可 能 还 需要 取消 订阅 ， 因 此 也 为 取消 订阅 函数 定义 个 接口 。 


code/redux/angular2-redux-chat/minimal/tutorial/06-store-w-subscribe.ts 





interface UnsubscribeCallback { 
(): void; 
j 
这 上 段 代 码 没 什么 内 容 , 它 只 是 另 一 个 没有 参数 的 函数 , 也 没有 返回 值 。 但 定义 这 些 类 型 能 让 
我 们 的 代码 更 容易 阅读 。 


store 还 要 保存 一 个 ListenerCallbacks 的 列表 。 我 们 把 这 个 列表 加 到 Store 中 。 


code/redux/angular2-redux-chat/minimal/tutorial/06-store-w-subscribe.ts 


class Store«T» { 
private _state: T; 
private _listeners: ListenerCallback[] = []; 


EE TERI UH subscribe AGE MT ESD I_listeners#IZ'P T o 


code/redux/angular2-redux-chat/minimal/tutorial/06-store-w-subscribe.ts 


subscribe(listener: ListenerCallback): UnsubscribeCallback { 

this. listeners .push(listener); 

return () => { // returns an "unsubscribe" function 
this. listeners = this. listeners.filter(1l => 1 !== listener); 
}; 

} 
subscribe 接 收 一 个 ListenerCallback 参 数 ( 也 就 是 一 个 没有 参数 、 没 有 返回 值 的 函数 ) 并 

返回 JnsubscribeCallback (方法 签名 同上 )。 添 加 监听 器 很 简单 : 只 要 用 push 方 法 把 它 追 加 到 
_listeners 数 组 中 就 可 以 了 。 


它 的 返回 值 是 一 个 函数 。 这 个 函数 会 修改 _1isteners 列 表 , 把 刚 加 上 的 1istener 过 滤 掉 。 也 
就 是 说 , CIR llUnsubscr ibeCal lback PAA, 调用 此 函数 就 会 把 刚 加 上 的 listener 从 列表 中 移 除 。 


2. 通知 监听 器 


每 当 state 发 生变 化 时 , 我 们 都 要 调用 这 些 监听 函数 。 也 就 是 说 , 无 论 是 分 发 了 一 个 新 的 action 
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还 是 state 发 生变 化 ， 我 们 都 要 调用 所 有 监听 器 。 


code/redux/angular2-redux-chat/minimal/tutorial/06-store-w-subscribe.ts 


dispatch(action: Action): void { 
this._state = this.reducer(this._state, action); 
this. listeners.forEach((listener: ListenerCallback) => listener()); 


] 
3. 完整 的 store 


稍 后 我 们 会 亲自 尝试 这 个 store， 不 过 现在 先 看 看 Store 最 新 的 完整 代码 清单 。 





code/redux/angular2-redux-chat/minimal/tutorial/06-store-w-subscribe.ts 


class Store«T» { 
private _state: T; 
private _listeners: ListenerCallback[] = []; 


constructor ( 
private reducer: Reducer<T>, 
initialState: T 
)ít 
this. state - initialState; 
j 


getState(): T ( 
return this. state; 


j 


dispatch(action: Action): void { 
this. state - this.reducer(this. state, action); 
this. listeners.forEach((listener: ListenerCallback) -» listener()); 


j 


subscribe(listener: ListenerCallback): UnsubscribeCallback { 
this. listeners.push(listener); 
return () => { // returns an "unsubscribe" function 
this. listeners = this. listeners.filter(l => 1 !== listener); 


hr 





} 
} 


4. 试用 subscribe 
现在 可 以 订阅 这 个 store 的 变化 了 ， 试 试看 。 


code/redux/angular2-redux-chat/minimal/tutorial/06-store-w-subscribe.ts 


let store = new Store«number»(reducer, 0); 
console. log(store.getState()); // -> 0 


// subscribe 
let unsubscribe = store.subscribe(() => { 
console.log('subscribed: ', store.getState()) 
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store.dispatch({ type: 'INCREMENT' }); // -> subscribed: 1 
store.dispatch({ type: 'INCREMENT' }); // -> subscribed: 2 


unsubscribe(); 
store.dispatch({ type: 'DECREMENT' 3); // (nothing logged) 


// decrement happened, even though we weren't listening for it 
console.log(store.getState()); // -> 1 


我 们 订阅 了 store 并 在 其 回调 函数 中 输出 日 志 subscribed: 以 及 store 的 当前 state。 





e 注意 ， 监 听 函 数 并 没有 把 当前 state 作 为 参数 传 进来 。 尽 管 这 个 选择 看 起 来 有 点 
奇怪 , 但 这 是 因为 还 有 另 一 些 细节 需要 权衡 。 a 变更 通知 和 当前 state 
分 开会 更 利于 思考 。 在 此 就 不 再 深入 探 完 了 ， 要 了 解 更 多 信息 ， 请 阅读 
https://github.com/reactjs/redux/issues/1707. https://github.com/reactjs/redux/issues/ 
15134https://github.com/reactjs/redux/issues/303 。 





我 们 保存 了 unsubscribe 回 调 函 数 。 接 下 来 要 注意 ， 在 调用 unsubscribe() 之 后 就 不 会 再 输 
出 日 志 了 。 我 们 仍然 可 以 分 发 action， 但 却 看 不 到 它 的 结果 了 ， 除 非 直 接 向 store 询 问 。 





-a nn 你 可 能 会 想到 ， 其 实 也 可 以 用 RxJS 实 现 自己 的 订 
阅 监 听 器 。 你 可 以 重 写 Store， 用 可 观察 对 象 代替 我 们 自行 实现 的 订阅 机 制 。 
英雄 所 见 略 同 。 事 实 上 ,我 们 已 经 替 你 做 好 了 ,你 可 以 在 文件 code/redux/angular2- 
redux-chat/minimaltutorialM/06b-rx-store.ts 中 找到 示例 代码 。 

如 果 你 愿意 使 用 RxJS 作 为 应 用 的 数据 骨架 ， 那 么 用 RxJS 实 现 Store 就 是 一 种 有 
趣 而 强大 的 模式 。 

我 们 在 这 里 并 没有 过 多 使 用 可 观察 对 象 ,主要 是 因为 我 们 想 讨论 Redux 本 身 以 及 
如 何 使 用 一 个 单独 的 state 树 来 思考 数据 架构 。Redux 本 身 已 经 强大 到 不 必 借助 可 
观察 对 象 就 可 以 在 应 用 中 使 用 了 。 

一 旦 你 领悟 了 如 何 使 用 “正统 ”Redux， 那 么 再 加 入 可 观察 对 象 就 一 点 也 不 难 了 
( 前提 是 你 已 经 理解 了 RxJS )。 我 们 先 暂 且 使 用 “正统 ” Redux; 本 章 结 尾 处 会 
给 出 一 些 指 引 ， 告 诉 你 如 何 使 用 基于 可 观察 对 象 的 Redux 包 装 器 。 


12.3.8 Redux 核心 


上 面 这 个 store 就 是 Redux 的 基本 内 核 。reducer 接 收 当前 state 和 action 并 返回 一 个 新 的 state， 这 
个 state 会 保存 在 store 中 。 


想 要 构建 一 个 用 于 生产 环境 的 大 型 网 络 应 用 , 我 们 显然 还 要 添加 更 多 。 但 是 , 我 们 稍 后 涉及 
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的 所 有 新 概念 都 将 以 这 样 一 个 简单 的 概念 为 基础 :state 是 不 可 改变 的 ， 是 集中 存储 的 。 如 果 掌 握 
了 之 前 提 到 的 这 些 概 念 ， 也 可 以 发 明 一 些 能 用 在 高 级 Redxu 应 用 中 的 模式 ( 以 及 类 库 )。 


在 Redux 的 日 常 使 用 过 程 中 ， 还 有 许多 我 们 未 曾 涉及 的 方面 。 比 如 ， 我 们 需要 知道 : 


Q 如 何在 state 中 精心 处 理 更 复杂 的 数据 结构 ; 

O 当 state 发 生变 化 时 ， 如 何不 必 轮 询 state 就 得 到 通知 (使 用 订阅 ); 

口 如 何 拦截 分 发 进行 调试 (middleware ); 

Q 如 何 计算 派生 值 ( 使 用 选择 器 ); 

口 如 何 把 一 个 大 型 reducer 分 解 成 许多 可 维护 的 小 型 reducer ( 并 重新 组 合 ); 
口 如 何 处 理 异步 数据 。 


我 们 将 在 本 章 的 剩余 部 分 和 下 一 章 中 逐一 解释 这 些 问 题 并 讲解 常用 的 模式 。 


我 们 首先 介绍 如 何在 state 中 处 理 更 复杂 的 数据 结构 。 为 此 ,我 们 需要 一 个 比 计数 如 更 有 意思 
的 示例 。 那 就 构建 一 个 聊天 应 用 吧 ， 用 户 可 以 用 它 向 彼此 发 送 消息 。 



































12.4 ”消息 应 用 
在 这 个 聊天 应 用 中 ( 以 及 所 有 Redux 应 用 中 ) 数据 模型 有 三 个 主要 部 分 : 


(1) state 





(2) action 


(3) reducer 


12.4.1 消息 应 用 的 state 
计数 器 应 用 中 的 state 只 是 一 个 数字 ， 而 在 这 个 消息 应 用 中 ，state 是 一 个 对 象 。 


这 个 state 对 象 只 有 一 个 属性 messages。messages 是 一 个 字符 串 数 组 , 每 个 字符 串 表示 应 用 中 cam 
的 一 条 消息 。 例 如 : 


// an example ^state^ value 
{ 
messages: [ 
"here is message one', 
'here is message two' 
] 
j 


我 们 可 以 这 样 定义 该 应 用 中 的 state 类 型 。 
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code/redux/angular2-redux-chat/minimal/tutorial/07-messages-reducer.ts 


interface AppState { 
messages: string[]; 


} 


12.4. ”消息 应 用 的 action 


这 个 应 用 将 处 理 两 个 action: ADD_MESSAGE 和 DELETE_MESSAGE 。 














action 对 象 ADD_MESSAGE 永 远 都 有 一 个 属性 message ， 这 个 属性 表示 添加 到 state 中 的 消息 。 
action 对 象 ADD_MESSAGE 的 模型 如 下 : 


{ 
type: 'ADD_MESSAGE', 
message: 'Whatever message we want here' 


] 

action 对 象 DELETE_MESSAGE 会 从 state 中 删除 一 条 指定 的 消息 。 这 里 的 问题 在 于 ， 我 们 要 指出 
想 删 除 的 是 哪 条 消息 。 

如 果 消 息 的 数据 结构 是 对 象 的 话 ， 可 以 在 每 条 消息 创建 的 时 候 赋 予 它 一 个 1g 属性。 然而 , 为 
了 让 这 个 示例 尽 可 能 简单 ， 消 息 只 是 单纯 的 字符 串 ， 因 此 我 们 只 能 用 另 一 种 方式 来 删除 消息 了 。 
目前 最 简单 的 方式 就 是 直接 使 用 消息 数组 里 的 索引 ( 可 以 看 作 事 实 性 的 ID )。 


明白 这 一 点 之 后 ，action 对 象 DELETE_MESSAGE 的 模型 如 下 : 





























{ 
type: 'DELETE_MESSAGE', 
index: 2 // «- or whatever index is appropriate 
j 
我 们 可 以 用 TypeScript 的 语法 interface ... extends 来 定义 这 些 action 的 类 型 。 


code/redux/angular2-redux-chat/minimal/tutorial/07-messages-reducer.ts 


interface AddMessageAction extends Action { 
message: string; 


} 


interface DeleteMessageAction extends Action { 
index: number; 


} 


这 样 AddMessageAction 就 能 指定 一 条 消息 了 , 而 DeleteMessageAction 也 可 以 指定 一 个 索引 。 


12.4.8 ”消息 应 用 的 reducer 


记 住 reducer 需 要 处 理 两 个 action: ADD_MESSAGE 和 DELETE_MESSACGE 。 下 面 来 分 别 讨论 它们 : 
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1. 处 理 ADD_MESSAGE 
首先 针对 action.type 使 用 switch 语 句 并 处 理 ADD_MESSAGE 分 支 。 





code/redux/angular2-redux-chat/minimal/tutorial/07-messages-reducer.ts 


let reducer: Reducer«AppState» - 
(state: AppState, action: Action): AppState => { 
switch (action.type) { 
case 'ADD MESSAGE': 
return { 
messages: state.messages.concat( 
(«AddMessageAction»action).message 
), 
F; 


e TypeScript 的 对 象 本 身 已 经 有 类 型 了 ， 为 什么 还 要 添加 一 个 type 字 段 呢 ? 

要 处 理 这 种 “多 态 分 发 ”( polymorphic dispatch )， 有 很 多 方式 可 供 选择 。 想 区 
分 不 同类 型 的 action 并 在 同一 个 reducer 里 处 理 它们 ， 一 种 非常 简明 的 方式 是 在 
type 字 段 里 存 一 个 字符 串 ( 这 里 type 的 意思 是 “action 的 类 型 ” )。 从 某 种 程度 上 
说 ， 你 确实 不 必 为 每 个 action 创 建 一 个 新 的 接口 。 
不 过 ， 用 反射 来 实现 对 具体 类 型 的 Switch 会 更 令 人 满意 。 虽 然 类 型 守卫 "开启 了 
这 种 可 能 性 ， 但 当前 版 本 的 TypeScript 还 做 不 到 这 一 点 。 
从 广义 上 来 说 ， 类 型 只 是 一 个 编译 阶段 的 概念 。 代 码 编译 成 JavaScript 后 ， 会 丢 
失 一 些 类 型 的 元 数据 。 
当然 ， 如 果 你 觉得 对 type 字 段 进行 switch 很 麻烦 ， 和 希望 直接 使 用 语言 特性 来 实 
现 的 话 ， 也 可 以 使 用 “装饰 器 反射 元 数据 ”技术 ”。 目 前 ， 用 一 个 简单 的 type 
字段 就 足够 了 。 


2. 添加 一 项 而 不 改变 原 有 数据 


当 处 理 ADD_MESSACE 时 ， 我 们 需要 把 给 定 的 消息 添加 到 state 中 。 像 所 有 的 reducer 一 样 ， 我 们 
需要 返回 一 个 新 的 state。 要 记 住 ，reducer 必 须 是 纯 函 数 并 且 不 会 改变 旧 的 state。 


下 面 的 代码 有 什么 问题 ? 


case 'ADD. MESSAGE ' : 
state.messages.push( action.message ); 
return { messages: messages }; 


vp AMENS 


问题 在 于 这 段 代 码 改 变 了 state.messages 数 组 , 也 就 是 改变 了 旧 的 state。 正确 的 做 法 是 创建 
一 个 state.messages 数 组 的 副本 并 把 新 消息 添加 到 这 个 副本 中 。 

















(D https://basarat.gitbooks.io/typescript/content/docs/types/typeGuard.html 
@ http://blog.wolksoftware.com/decorators-metadata-reflection-in-typescript-from-novice-to-expert-part-4 
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code/redux/angular2-redux-chat/minimal/tutorial/07-messages-reducer.ts 


case 'ADD_MESSAGE': 
return { 
messages: state.messages.concat( 
(<AddMessageAction>action) .message 
), 


Q, 语法 CAddMessageAction>action 会 把 action 转 换 成 更 具体 的 类 型 。 也 就 是 说 ， 


reducer 接 收 的 是 更 通用 的 类 型 Action ， 它 并 没有 messsage 字 段 。 如 果 这 里 我 们 
没有 进行 转换 ， 那 么 编译 器 就 会 报告 说 Action 没 有 messsage 字 段 。 

人 但是， 我们 确实 知道 有 一 个 ADD_MESSAGE action ， 所 以 就 把 它 转化 成 一 个 
AddMessageAction。 使 用 圆 括号 来 确保 编译 器 知道 我 们 要 转化 的 是 action 而 不 


是 action.message。 


记 住 , reducer 必 须 返 回 一 个 新 的 AppState。 当 我 们 从 reducer 返 回 一 个 对 象 的 时 候 , 它 必须 匹 
配 AppState 的 格式 。 在 这 个 例子 中 ， 我 们 只 需要 一 个 关键 字段 messages; 但 在 更 复杂 的 state 中 , 
就 要 考虑 更 多 字段 了 。 

3. 删除 一 项 而 不 改变 原 有 数据 


记 住 ， 当 处 理 DELETE_MESSAGE action 时 ， 我 们 传人 数组 中 消息 的 索引 作为 代理 ID ( 另 一 种 常 
见 的 做 法 是 传人 一 个 真实 条 目的 ID )。 另 外 ， 因 为 我 们 不 想 改变 旧 的 messages 数 组 ， 所 以 需要 小 


MH 











H 
Lo 





code/redux/angular2-redux-chat/minimal/tutorial/07-messages-reducer.ts 


case 'DELETE MESSAGE': 
let idx - («DeleteMessageAction»action).index; 
return { 
messages: [ 
...State.messages.slice(0, idx), 
...State.messages.slice(idx + 1, state.messages.length) 


] 


这 里 使 用 了 两 次 slice 操 作 符 。 首 先 获取 要 删除 条 目 之 前 的 所 有 条 目 ， 然 后 连接 上 其 后 的 所 
有 条 日 o 
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Q, 有 4 种 不 改变 原 有 数据 的 常见 操作 : 
O 往 数 组 中 添加 一 项 ; 
口 从 数组 中 移 除 一 项 ; 
Q 添加 或 修改 对 象 中 的 键 ; 
口 从 对 象 中 移 除 键 。 
前 两 个 (数组 的 ) 操作 我 们 已 经 介绍 过 了 。 接 下 来 我 们 将 讨论 更 多 关于 对 象 的 
操作 。 目 前 需要 知道 的 是 一 种 使 用 Object.assign 的 常用 方法 ， 如 下 所 示 : 


Object.assign({}, oldObject, newObject) 
// «------- 《一 一 一 一 一 一 一 一 一 一 一 一 一 





你 可 以 认为 Object.assign 方 法 是 从 右 至 左 地 合并 对 象 。newObject 合 并 到 
oldobject ， 再 合并 到 {}。 这 样 ，oldobject 的 所 有 字段 都 会 保留 ， 除 非 字 段 在 
newObject 中 也 存在 。 无 论 是 ol1d0bject 还 是 newObject 都 不 会 被 改变 。 

当然 ， 进 行 这 些 处 理 时 要 小 心 谨慎 ， 因 为 很 容易 犯错 。 这 也 是 很 多 人 使 用 
Immutable.js 的 一 个 原因 ，Immutable.js 是 一 组 有 助 于 加 强 不 变性 的 数据 结构 。 


12.4.4 ”试用 action 
现在 来 尝试 运行 action。 
code/redux/angular2-redux-chat/minimal/tutorial/07-messages-reducer.ts 
let store = new Store«AppState»(reducer, { messages: [] }); 


console. log(store.getState()); // -> { messages: [] } 


store.dispatch( { 

type: 'ADD_MESSAGE', 

message: ‘Would you say the fringe was made of silk?' 
} as AddMessageAction) ; 





store.dispatch( { 

type: 'ADD MESSAGE', 

message: 'Wouldnt have no other kind but silk' 
} as AddMessageAction); 


store.dispatch( { 

type: 'ADD_MESSAGE', 

message: ‘Has it really got a team of snow white horses?' 
} as AddMessageAction) ; 


console. log(store.getState()) 
// -> 





(D https://facebook. github.io/immutable-js/ 
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// { messages: 

// [ ‘Would you say the fringe was made of silk?', 

// 'Wouldnt have no other kind but silk', 

// 'Has it really got a team of snow white horses?' ] } 


我 们 先 创建 了 一 个 新 的 store ， 然 后 调用 store.getState() ， 从 而 看 到 一 个 空 的 messages 
数组 。 


接 下 来 ， 我 们 往 store 中 添加 三 条 消息 "。 对 于 每 条 消息 ， 我 们 都 把 type 设 为 ADD_MESSAGE 并 
把 每 个 对 象 转换 成 AddMessageAction。 

最 后 ， 我 们 把 新 的 state 打 印 出 来 ， 就 能 看 到 messages 数 组 包含 了 所 有 这 三 条 消息 。 

这 三 个 qispatch 语 名 都 不 够 优雅 ， 原 因 有 以 下 两 点 。 

(1) 每 次 都 需要 手动 指定 type 字 符 串 。 我 们 也 可 以 改 用 常量 ， 但 是 如 果 什 么 都 不 用 做 就 更 
好 了 。 

(2) 需要 手动 转换 成 AddMessageAction。 


我 们 应 该 创建 一 个 函数 来 创建 这 些 对 象 ， 而 不 是 直接 创建 。 编 写 函 数 来 创建 action 的 思想 在 
Redux 中 很 常见 ， 因 此 这 种 模式 有 个 名 字 : action creator. 







































































12.4.5 action creator 
我 们 要 创建 一 个 函数 来 创建 ADD_MESSAGE action， 而 不 是 直接 使 用 对 象 。 


code/redux/angular2-redux-chat/minimal/tutorial/08-action-creators.ts 











class MessageActions { 
static addMessage(message: string): AddMessageAction { 
return { 
type: 'ADD MESSAGE', 
message: message 


un 


static deleteMessage(index: number): DeleteMessageAction { 
return { 
type: 'DELETE_MESSAGE', 
index: index 
}; 
} 
} 


这 里 创建 了 一 个 类 , 它 有 两 个 静态 方法 addMessage 和 deleteMessage ,分 别 返 回 AddMessage- 
Action 和 DeleteMessageAction。 





(D https://en.wikipedia.org/wiki/The_Surrey_with the Fringe on Top 
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你 不 一 定 要 用 静态 方法 作为 action creator， 也 可 以 使 用 普通 的 函数 ,命名 空间 中 
的 函数 ， 甚 至 是 一 个 对 象 的 实例 方法 等 。 关 键 是 要 用 统一 的 方式 来 组 织 它们 ， 
让 它们 便于 使 用 。 


现在 我 们 就 改 用 新 的 action creator 了 。 





code/redux/angular2-redux-chat/minimal/tutorial/08-action-creators.ts 
let store = new Store«AppState»(reducer, { messages: [] }); 


console.log(store.getState()); // -> { messages: [] } 


store.dispatch( 
MessageActions.addMessage( Would you say the fringe was made of silk?')); 


store.dispatch( 
MessageActions.addMessage( 'Wouldnt have no other kind but silk')); 


store.dispatch( 
MessageActions.addMessage('Has it really got a team of snow white horses?')); 





console.log(store.getState()); 


// => 

// ( messages: 

// | 'Would you say the fringe was made of silk?', 

Y 'Wouldnt have no other kind but silk', 

// 'Has it really got a team of snow white horses?' ] } 
这 样 感觉 好 多 了 ! 


它 还 有 一 个 额外 的 好 处 : 如 果 最 终 决定 要 改变 消息 的 格式 , 我 们 不 用 更 新 任何 一 处 dispatch 
语句 。 比 如 ， 假 设 我 们 要 给 每 条 消息 增加 创建 时 间 ， 就 可 以 在 addMessage 方 法 中 添加 一 个 
created_at 字 段 ， 那 么 现在 所 有 的 AddMessageActions 都 会 有 created_at 字 上 段 : 





class MessageActions { 
static addMessage(message: string): AddMessageAction { 
return { 
type: 'ADD MESSAGE', 
message: message, 
// something like this 
created at: new Date() 
hs 
j 
J£ ves 





12.4.6 ”使 用 真正 的 Redux 


现在 我 们 已 经 写 好 了 自己 的 迷你 版 Redux。 你 可 能 会 问 :“ 要 想 使 用 真正 的 Redux 还 需要 做 什 
么 ? ” 谢 天 谢 地 ， 没 有 多 少 要 做 的 。 让 我 们 更 新 一 下 代码 ， 现 在 就 改 用 真正 的 Redux。 
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如 果 你 还 没准 备 好 ， 那 就 需要 在 code/redux/angular2-redux-chat/minimal/tutorial 
目录 下 运行 命令 npm install。 








首先 要 做 的 是 从 redux 包 中 导入 Action 、Reducer 和 Store。 同 时 还 导入 了 一 个 辅助 函数 


createStore,; 


code/redux/angular2-redux-chat/minimal/tutorial/09-real-redux.ts 


import { 
Action, 
Reducer, 
Store, 
createStore 


} from 'redux'; 


fe PK, ibre 





























ducer 创 建 初始 的 state， 而 不 是 在 创建 store 的 时 候 指 定 。 这 里 ， 我 们 让 reducer 的 























默认 参数 来 做 这 件 事 。 采 用 这 种 方式 ， 如 果 没 有 state 传 人 ( 例如 在 初始 化 阶段 中 reducer 被 首次 调 


用 ) 就 会 使 用 初始 的 state。 


code/redux/angular2-redux-chat/minimal/tutorial/09-real-redux.ts 


let initialState: AppState = { messages: [] }; 


let reducer: 
(state: App 





Reducer«AppState» - 
State = initialState, action: Action) => { 


reducer 的 其 余部 分 都 不 用 动 ， 干 得 漂亮 
最 后 要 做 的 是 使 用 Redux 的 辅助 函数 createStore 来 创建 store。 























code/redux/angular2-redux-chat/minimal/tutorial/09-real-redux.ts 
let store: Store«AppState» - createStore«AppState»(reducer); 


之 后 一 切 正 常 ! 


code/redux/angular2-redux-chat/minimal/tutorial/09-real-redux.ts 
let store: Store«AppState» - createStore«AppState»(reducer); 
console.log(store.getState()); // -> { messages: [] } 


store.dispatch( 
MessageActions.addMessage('Would you say the fringe was made of silk?')); 


store.dispatch( 
MessageActions.addMessage( 'Wouldnt have no other kind but silk')); 


store.dispatch( 
MessageActions.addMessage('Has it really got a team of snow white horses?')); 





console.log(store.getState()) 
// => 


12.6 规划 应 用 299 





// { messages: 


// [ ‘Would you say the fringe was made of silk?', 
// 'Wouldnt have no other kind but silk', 
// "Has it really got a team of snow white horses?' ] } 











现在 我 们 只 是 单纯 地 使 用 Redux 来 解决 问题 ， 下 一 步 还 要 把 Redux 和 我 们 的 网 络 应 用 联系 起 
来 。 开 始 行动 吧 。 


12.5 Æ Angular 中 使 用 Redux 

在 上 一 节 中 ,我 们 学 习 了 Redux 的 核心 并 展示 了 如 何在 Redux 中 创建 reducer 以 及 使 用 store 管 理 
数据 。 现 在 我 们 要 更 进一步 ， 把 Redux 和 Angular 组 件 结 合 起 来 。 

我 们 将 在 本 节 中 创建 一 个 最 小 化 的 Angular 应 用 。 该 应 用 只 有 一 个 计数 器 ， 可 以 通过 按钮 来 
增加 或 减少 计数 ( 如 图 12-2 所 示 )。 





Counter 
Custom Store 


The counter value is: 3 


图 12-2 ”计数 器 应 用 








这 种 小 应 用 可 以 让 我 们 专注 于 Redux 和 Angular 之 间 的 集成 点 。 在 下 一 节 中 , 我 们 将 进一步 讨 
论 更 大 的 应 用 。 目 前 ， 我 们 先 来 看 看 如 何 构建 这 个 计数 器 应 用 ! 





e 我 们 没有 在 Redux 和 Angular 之 间 使 用 任何 辅助 类 库 ， 而 是 直接 集成 它们 。 其 实 
有 很 多 开源 类 库 可 以 简化 这 一 过 程 ， 参 见 12.13 节 。 
不 过 ， 一 旦 你 理解 了 其 背后 的 原理 ， 使 用 这 些 类 库 也 会 容易 得 多 。 这 里 我 们 所 
做 的 一 切 都 是 为 了 让 你 更 好 地 理解 Redux 背 后 的 原理 。 


12.6 ”规划 应 用 
你 应 该 还 记得 ， 规 划 Redux 应 用 的 三 个 步骤 是 : 


(1) 定义 应 用 中 央 state 的 数据 结构 ; 
(2) 定义 用 来 改变 state 的 action; 
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(3) 定义 一 个 reducer， 用 于 接收 旧 的 state 和 一 个 action 并 返回 新 的 state。 


对 于 这 个 应 用 来 说 , 我 们 只 是 要 增加 或 者 减少 计数 。 这 个 功能 已 经 在 上 一 节 实 现 了 ,所 以 你 
会 对 本 节 的 action 、store 和 reducer 感 到 非常 熟悉 。 


我 们 要 做 的 另外 一 件 事 就 是 ， 在 编写 Angular 应 用 时 决定 在 哪里 创建 组 件 。 在 这 个 应 用 中 ， 
有 一 个 顶层 组 件 CounterApp， 它 包含 一 个 CounterComponent 组 件 。CounterComponent 组 件 则 包 
含 屏幕 截图 所 示 的 那个 视图 。 


大 致 上 ， 我 们 要 做 以 下 几 件 事 : 
(1) 创建 store 并 通过 依赖 注入 使 它 可 以 在 整个 应 用 中 被 访问 到 ; 

(2) 订阅 Store 的 变化 并 在 组 件 中 显示 出 来 ; 

(3) 当 发 生 某 些 变 化 时 ( 例如 按 下 按钮 时 )， 我 们 将 通过 Store 来 分 发 一 个 action。 
计划 得 差不多 了 ， 下 面 来 看 看 如 何在 实践 中 应 用 ! 











‘tt 











12.7 组建 Redux 
首先 导入 一 些 稍 后 要 用 到 的 东西 。 


code/redux/angular2-redux-chat/minimal/app.ts 





import { 
Component 
} from 'Gangular/core'; 
import ( NgModule ) from "@angular/core"; 
import { BrowserModule } from "@angular/platform-—browser"; 
import { platformBrowserDynamic } from "Gangular/platform-browser-dynamic"; 
import { 
createStore, 
Store, 
StoreEnhancer 
} from 'redux'; 
import { counterReducer } from './counter-reducer'; 


我 们 导入 了 Store (类 ) 和 createStore (辅助 函数 )， 之 前 用 到 过 它们 。 我 们 还 导入 了 一 个 
叫 作 StoreEnhancer 的 新 类 ， 很 快 就 会 讲 到 它 。 


我 们 还 从 counter-reducerts 中 导 人 了 reducer， 从 app-state.ts 中 导入 了 state 的 接口 AppState。 





12.7.1 定义 应 用 的 state 
让 我 们 来 看 看 AppState。 


code/redux/angular2-redux-chat/minimal/app-state.ts 
export interface AppState { 
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counter: number; 


E 


这 里 把 中 央 state 的 结构 定义 成 了 AppState ， 它 是 一 个 对 象 并 且 只 有 一 个 键 counter ( 类 型 为 
number ) 在 下 个 示例 ( 聊天 应 用 ) 中 , 我 们 将 讨论 如 何 使 用 更 复杂 的 state, 但 目前 这 样 就 足够 了 。 

















12.7.2 定义 reducer 
接 下 来 定义 reducer， 它 负责 处 理应 用 state 中 计数 需 的 增加 和 减少 。 


code/redux/angular2-redux-chat/minimal/counter-reducer.ts 
mport { 

INCREMENT, 

DECREMENT 
} from './counter-action-creators'; 


let initialState: AppState = { counter: 0 }; 


// Create our reducer that will handle changes to the state 
export const counterReducer: Reducer«AppState» - 
(state: AppState = initialState, action: Action): AppState => { 
switch (action.type) { 
case INCREMENT: 
return Object.assign({}, state, { counter: state.counter + 1 }); 
case DECREMENT: 
return Object.assign({}, state, { counter: state.counter - 1 }); 
default: 
return state; 
} 
N 
我 们 先导 入 了 两 个 常量 INCREMENT 和 DECREMENT ， 它 们 是 由 action creator 导 出 的 。 虽 然 它们 只 


是 被 简单 地 定义 成 了 字符 串 'INCREMENT' 和 'DECREMENT' ， 但 不 错 的 是 我 们 可 以 从 编译 器 那里 获 
得 额外 的 帮助 ， 以 防 打 错字 。 我 们 稍 后 再 来 看 看 这 些 action creator. 


initialState 是 一 个 AppState ， 它 的 counter 属 性 为 6。 


counterReducer 处 理 两 个 action : 使 当前 计数 器 加 1 的 INCREMENT 以 及 使 计数 器 减 1 的 
DECREMENT。 这 两 个 action 都 使 用 Object .assign 来 确保 不 会 改变 旧 的 state， 而 是 创建 一 个 新 对 象 
并 把 它 作为 新 的 state 返 回 。 


既然 说 到 了 这 里 ， 我 们 就 来 看 看 action creator。 
























































12.7.3 ŒX. action creator 


action creator 是 国 数 ， 返 回 的 是 定义 action 的 对 象 。 下 面 的 increment 和 decrement 国 数 会 返 
回 一 个 定义 了 合适 type 的 对 象 。 
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code/redux/angular2-redux-chat/minimal/counter-action-creators.ts 


import { 
Action, 
ActionCreator 

} from 'redux'; 


export const INCREMENT: string = 'INCREMENT'; 

export const increment: ActionCreator<Action> = () => ({ 
type: INCREMENT 

D); 


export const DECREMENT: string = 'DECREMENT'; 

export const decrement: ActionCreator<Action> = () => ({ 
type: DECREMENT 

}); 























YEE, action creator 国 数 返 回 的 是 类 型 ActionCreatorActiony ActionCreator 是 一 个 Redux 
定义 的 泛 型 类 ， 可 以 用 来 定义 action 的 创建 函数 。 在 这 个 例子 中 ， 我 们 使 用 的 具体 类 是 Action ， 
但 也 可 以 使 用 一 个 更 具体 的 类 ， 比 如 上 一 节 定 义 的 AddMessageAction。 











12.7.4 创建 store 
现在 有 了 reducer 和 state， 我 们 可 以 这 样 创建 store。 


let store: Store«AppState» = createStore«AppState»(counterReducer); 


Ait, Redux f — SIRE, Abe EAA ILA ATO. ( 如 图 12-3 所 示 )。 特 别 是 
Chrome 插 件 ”"， 我 们 可 以 用 它 监 控 应 用 中 的 state 以 及 分 发 action。 






































Counter dN 


RCRFMENT 
Custom Store INCREMENT 


The counter value is: 2 


=o 


DECREMENT 





m Dispatcher 


图 12-3” 带 有 Redux 开 发 工具 的 计数 器 应 
































uu 








(D https://chrome.google.com/webstore/detail/redux-devtools/Imhkpmbekcpmknklioeibfkpmmfibljd?hl=en 
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Redux DevTools 最 棒 的 一 点 是 ， 它 可 以 让 我 们 清楚 地 观察 到 每 个 action 如 何 流 经 本 系统 以 及 
它 对 state 的 影响 。 


D 现在 就 去 安装 Redux DevTools 中 的 Chrome 播 件 吧 ! 





要 想 使 用 开发 者 工具 ， 我 们 必须 先 做 一 件 事 : 把 它 添加 到 store 中 。 


code/redux/angular2-redux-chat/minimal/app.ts 


let devtools: StoreEnhancer<AppState> = 
window['devToolsExtension'] ? 
window['devToolsExtension']() : f => f; 


a 


并 不 是 每 个 使 用 我 们 应 用 的 人 都 安装 好 了 Redux DevTools 。 上 述 代码 会 检查 由 Redux 
DevTools 定 义 的 window.devToolsExtension。 如 果 它 存在 , 我 们 就 使 用 它 ; 否则 返回 一 个 identity 
function (f =、f )， 它 会 直接 返回 传 给 它 的 一 切 。 

















Q, middleware 是 一 个 术语 , 表示 用 来 强化 另 一 个 类 库 功 能 的 函数 。 Redux DevTools 
是 众多 Redux middleware 类 库 中 的 一 个 。Redux 支 持 许 多 有 趣 的 middleware， 如 
果 想 自己 写 也 很 容易 。 
你 可 以 在 http://redux.js.org/docs/advanced/Middleware.html 读 到 X 于 Redux 
middleware 的 更 多 内 容 。 











为 了 使 用 这 个 devtools ， 我 们 把 它 当 作 middleware 传 给 Redux 的 store。 





code/redux/angular2-redux-chat/minimal/app.ts 


let store: Store«AppState» = createStore<AppState> ( 
counterReducer , 
devtools 


); 
现在 ， 无 论 我 们 分 发 action 还 是 改变 state， 都 可 以 在 浏览 器 中 监测 到 了 。 

















12.8 CounterApp 组 件 


现在 已 经 设置 好 了 Redux 的 内 核 , 我 们 把 注意 力 转向 Angular 组 件 。 先 来 创建 应 用 的 顶层 组 件 
CounterApp。 它 将 被 用 来 引导 (bootstrap ) Angular。 


code/redux/angular2-redux-chat/minimal/app.ts 


@Component ( f 
selector: 'minimal-redux-app', 
template: ^ 
«div» 
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«counter-component» 
«/counter-component» 
«/div» 


}) 
class CounterApp { 


} 
这 个 组 件 所 做 的 一 切 就 是 创建 CounterComponent 的 一 个 实例 ， 我 们 马上 就 会 定义 它 。 在 此 
之 前 ， 让 我 们 先 来 启动 应 用 。 























12.9 提供 store 
我 们 将 用 CounterApp 作 为 应 用 的 根 组 件 。 记 住 ， 由 于 这 是 一 个 Redux 应 用 ， 我 们 需要 让 store 
的 实例 在 应 用 的 任何 地 方 都 能 被 访问 到 。 该 怎么 做 呢 ? 我 们 将 使 用 依赖 注入 技术 。 


还 记得 第 8 章 提 到 过 的 吗 ? 当 希望 通过 依赖 注入 来 获取 某 样 东西 时 ， 我 们 就 会 在 NgModule 中 
使 用 providers 配 置 项 将 其 添加 到 providers 列 表 中 。 


如 果 我 们 要 把 某 样 东西 提供 给 依赖 注入 系统 ， 需 要 指出 两 点 : 

(1) 用 于 指 代 这 个 可 注入 依赖 的 令 牌 ; 

(2) 注入 依赖 的 方式 。 

通常 ， 如 果 我 们 想 提 供 一 个 单 例 服 务 ， 可 能 会 像 这 样 使 用 useclass 选 项 : 
{ provide: SpotifyService, useClass: SpotifyService } 


在 这 个 例子 中 ， 我 们 使 用 Spoti fyservice 类 作为 依赖 注 和 人 系统 中 的 令 牌 。useClass 选 项 会 
告诉 Angular 创 建 SpotifyService 的 一 个 实例 , 并 且 无 论 何 时 要 求 注入 SpotifyService 都 会 复 用 
这 个 实例 (也 就 是 维护 一 个 单 例 )。 

不 过 使 用 这 种 方式 有 一 个 问题 : 我 们 不 想 让 Angular 创 建 store， 因 为 之 前 已 经 用 createStore 
创建 好 了 。 我 们 只 想 使 用 已 创建 好 的 store。 

要 这 么 做 ， 就 要 使 用 provide 中 的 usevalue 选 项 。 之 前 我 们 已 经 使 用 过 像 API_URL 这 样 的 可 
配置 值 了 : 


{ provide: API_URL, useValue: 'http://localhost/api' } 


还 有 一 件 事 没有 解决 ,， 那 就 是 使 用 什么 样 的 令 牌 来 注入 。store 的 类 型 是 Store<AppStatey 。 



















































































code/redux/angular2-redux-chat/minimal/app.ts 


let store: Store«AppState» = createStore<AppState> ( 
counterReducer , 
devtools 


); 
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Store 并 非 一 个 类 ， 而 是 一 个 接口 。 很 不 幸 ， 我 们 不 能 使 用 接口 作为 依赖 注入 的 键 。 











o 你 也 许 想 知道 接口 为 什么 不 能 作为 依赖 注入 的 键 。 答 案 就 是 ， 因 为 TypeSeript 
的 接口 在 编译 完成 后 就 会 被 移 除 ， 所 以 在 运行 环境 中 是 获取 不 到 的 。 
如 果 你 想 了 解 更 多 ， 请 参见 http://stackoverflow.com/questions/32254952/binding- 
a-class-to-an-interface 、https://github.com/angular/angular/issues/135 和 http://victor- 
savkin. com/post/126514197956/dependency-injection-in-angular-1-and-angular-2。 





这 就 表示 我 们 需要 创建 自己 的 令 牌 ， 用 来 注入 store。 谢 天 谢 地 ，Angular 让 这 项 任务 变 得 很 
上 容易。 我 们 在 store 的 文件 中 创建 这 个 令 牌 ， 这 样 就 可 以 在 应 用 的 任何 地 方 导 和 人 它 。 





code/redux/angular2-redux-chat/minimal/app-store.ts 


import { OpaqueToken } from 'Gangular/core'; 


export const AppStore = new OpaqueToken('App.store'); 


这 里 创建 了 一 个 const AppStore， 它 使 用 Angular 提 供 的 OpaqueToken 类 。 相 对 于 直接 注入 
字符 串 ，0paqueToken 是 一 个 更 好 的 选择 ， 因 为 它 有 助 于 避免 命名 冲突 。 


现在 我 们 可 以 在 provide 中 使 用 AppStore 这 个 令 牌 了 。 开 工 ! 











12.10 ”启动 应 用 
回 到 app.ts 文 件 ， 我 们 创建 一 个 NgModule 来 启动 应 用 。 


code/redux/angular2-redux-chat/minimal/app.ts 


GNgModule( { 
declarations: [ 
CounterApp, 
CounterComponent 
l, 
imports: [ BrowserModule ], 
bootstrap: [ CounterApp ], 
providers: [ 
{provide: AppStore, useValue: store } 


] 





}) 
class CounterAppAppModule {} 


plat formBrowserDynamic() .bootstrapModule(CounterAppAppModule ) 


现在 我 们 就 可 以 通过 注 和 人 AppStore 在 应 用 的 任何 地 方 引用 Redux 的 store 了 。 目 前 最 需要 它 的 
地 方 就 是 CounterComponent 。 
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12.11 CounterComponent 














随 着 设置 的 完成 ,我 们 可 以 开始 创建 组 件 了 。 它 实际 上 负责 向 用 户 显 示 计 数 带 并 提供 按钮 来 
让 用 户 改变 state。 


12.11.1 import 
我 们 先 来 看 看 导入 。 


code/redux/angular2-redux-chat/minimal/CounterComponent.ts 
import { 
Component, 
Inject 
} from '@angular/core'; 
import { Store } from 'redux'; 
import { AppStore } from './app-store'; 
import { AppState } from './app-state'; 
import x* as CounterActions from './counter-action-creators'; 


我 们 从 Redux 中 导入 了 Store 以 及 我 们 自己 的 注入 令 牌 AppStore， 它 可 以 让 我 们 引用 到 store 
的 单 例 。 我 们 还 导入 了 AppState 类 型 ， 这 有 助 于 我 们 掌握 中 央 state 的 结构 。 











最 后 ， 我 们 通过 * as CounterActions 语 法 导入 了 所 有 的 action creator。 这 个 语法 会 让 我 们 
调用 CounterActions .increment() 来 创建 一 个 INCREMENT action. 


12.11.2 ”模板 
我 们 来 看 看 CounterComponent 的 模板 C 如 图 12-4 所 示 )。 


code/redux/angular2-redux-chat/minimal/CounterComponent.ts 


@Component ( { 
selector: 'counter-component', 
template: ^ 
«div class="row"> 
«div class-"col-sm-6 col-md-4"» 
«div class="thumbnail"> 
«div class="caption"> 
«h3» Counter «/h3» 
«p»Custom Store«/p» 


<p> 
The counter value is: 
<b>{{ counter }}</b> 
</p> 


<p> 
«button (click)="increment()" 
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class="btn btn-primary"> 
Increment 
</button> 
«button (click)="decrement()" 
class="btn btn-default"» 




















Decrement 
</button> 
</p> 
</div> 
</div> 
</div> 
</div> 
Counter 
Custom Store 
The counter value is: 3 
Decrement 
图 12-4 计数 器 应 用 的 模板 
这 里 有 三 点 需要 注意 


(1) (£ counter }} 用 来 显示 计数 器 的 值 ; 
(2) 点 击 一 个 按钮 时 会 调用 increment( ) ; 
(3) 点 击 男 一 个 按钮 时 会 调用 decrement( )。 


12.11.3 constructor 


因为 这 个 组 件 依赖 于 store ， 所 以 我 们 要 在 构造 函数 中 把 它 注入 进来 。 这 里 示范 的 是 我 们 如 n2 
何 使 用 自 定义 的 AppStore 令 牌 来 注入 依赖 。 


code/redux/angular2-redux-chat/minimal/CounterComponent.ts 





export default class CounterComponent { 
counter: number; 


constructor (@Inject(AppStore) private store: Store<AppState>) { 
store.subscribe(() => this.readState()); 
this.readState(); 

j 


readState() ( 
let state: AppState - this.store.getState() as AppState; 
this.counter - state.counter; 
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} 


increment() { 
this.store.dispatch(CounterActions.increment()); 


} 


decrement() { 
this.store.dispatch(CounterActions.decrement()); 
} 
} 
我 们 使 用 eInject 注 解 来 注入 AppStore。 注 意 ， 我 们 把 变量 store 的 类 型 定义 成 了 Store 
<AppState> 。 这 里 使 用 的 注入 令 牌 和 用 类 作为 注入 令 牌 时 ( Angular 能 推 电 出 要 注入 的 是 什么 ) 
WEAR AS TA] 


我 们 把 store 设 置 为 一 个 实例 变量 ( 使 用 private store )。 有 了 store， 我 们 就 可 以 监听 它 的 
变化 了 。 这 里 调用 了 store.subscribe 和 this.readState(); 下 面 会 定义 readState。 


只 有 当 一 个 新 的 action 被 分 发 时 ,store 才 会 调用 subscribe, 因此 在 这 里 需要 确保 至 少 手 动 调 
用 readstate 一 次 ， 以 保证 组 件 可 以 获取 到 初始 数据 。 


readState 方 法 从 store 中 读 取 state 并 把 this .counter 更 新 成 最 新 值 。 因 为 this .counter 是 类 
的 一 个 属性 并 在 视图 中 绑 定 ， 所 以 Angular 会 检测 到 它 发 生 了 变化 并 重新 泻 染 组 件 。 


我 们 定义 了 两 个 辅助 方法 increment 和 decrement ， 它 们 分 别 把 各 自 的 action 分 发 到 store 中 。 
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12.114 “整合 





下 面 是 CounterComponent 的 完整 代码 清单 。 


code/redux/angular2-redux-chat/minimal/CounterComponent.ts 
import { 
Component, 
Inject 
} from 'Gangular/core'; 
import { Store } from 'redux'; 
import { AppStore } from './app-store'; 
import { AppState } from './app-state'; 
import x* as CounterActions from './counter-action-creators'; 


@Component ( { 

selector: 'counter-component', 

template: ^ 

«div class="row"> 
«div class-"col-sm-6 col-md-4"» 
«div class="thumbnail"> 
«div class="caption"> 

«h3» Counter «/h3» 
«p»Custom Store«/p» 
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<p> 
The counter value is: 
<b>{{ counter }}</b> 
</p> 


<p> 
«button (click)="increment()" 
class="btn btn-primary"» 
Increment 
</button> 
«button (click)="decrement()" 
class="btn btn-default"» 
Decrement 
</button> 
</p> 
</div> 
</div> 
</div> 
</div> 


}) 
export default class CounterComponent { 
counter: number; 


constructor(@Inject(AppStore) private store: Store<AppState>) { 
store.subscribe(() => this.readState()); 
this.readState(); 

} 


readState() { 
let state: AppState = this.store.getState() as AppState; 
this.counter = state.counter; 


} 


increment() { 
this.store.dispatch(CounterActions.increment()); 


} 


decrement() { 
this.store.dispatch(CounterActions.decrement()); 
j 
j 


试 一 下 (如 图 12-$ 所 示 )! 


cd code/redux/angular2-redux-chat 

npm install 

npm run go 

open http://localhost:8080/minimal.html 
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eoe [i ng-book 2 - minimal pure: x 





Œ | [5 localhost:8080/minimal.html pt | 三 





Inspector 
| 
Counter INCREMENT 
Custom Store INCREMENT 


The counter value is: 13 INCREMENT 


= = E 














图 12-5 工作 中 的 计数 器 应 


uu 














AS 你 已 经 创建 了 第 一 个 Angular 和 Redux 应 用 1! 


12.12 ”更 进一步 
现在 我 们 已 经 使 用 Redux 和 Angular 构 建 了 一 个 基本 的 应 用 , 还 应 该 尝试 构建 一 个 更 复杂 的 应 
用 。 当 试图 构建 更 大 型 的 应 用 时 ， 我 们 会 遭遇 新 的 挑战 。 


a 如 何 组 合 使 用 reducer? 
口 如 何 从 state 的 不 同 分 支 中 提取 数据 ? 
口 如 何 组 织 Redux 代 码 ? 


在 下 一 章 中 ,我 们 将 构建 一 个 聊天 应 用 ， 并 在 其 中 处 理 所 有 这 些 问题 ! 





















































12.13 ”参考 资源 
如 果 你 想 学 习 更 多 关于 Redux 的 知识 ， 下 面 是 一 些 很 不 错 的 资源 。 


口 Redux 官 网 : http://redux.js.org/ 
口 Redux 作 者 的 视频 教程 : https://egghead.io/courses/getting-started-with-redux 
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O 真实 世界 中 的 Redux ( 幻灯 片 展示 ): https://speakerdeck.com/chrisui/real-world-redux 
口 强大 的 高 阶 reducer: http://slides.com/omnidan/hor 





要 学 习 更 多 如 何 结合 使 用 Redux 和 Angular 内 容 ， 请 查阅 以 下 资源 。 


Q) angular2-redux: https://github.com/InfomediaLtd/angular2-redux 
O ng2-redux: https://github.com/angular-redux/ng2-redux 
O ngrx/store: https://github.com/ngrx/store 


继续 前 进 吧 ! 








{Angular 3| A Redux 


Redux 是 一 种 流行 且 优 雅 的 数据 架构 ， 我 们 在 上 一 章 学 习 了 它 的 相关 知识 。 我 们 还 构建 了 一 


个 非常 基础 的 应 用 ， 结 合 了 Angular 组 件 和 Redux 的 store。 
[ 解 这 些 概 念 ， 并 在 其 基础 之 上 构建 一 个 更 复杂 的 聊天 应 用 。 














在 本 章 中 ， 我 们 将 进一步 展开 读 
我 们 最 终 要 构建 出 的 应 用 如 图 13-1 所 示 。 




















@ © @ / M angular 2 - chat with xs x \\ 
€ > Œ [D bocathost:8080 
bicis 


Echo Bot * 
I'll echo whatever you send me 
Reverse Bot 

"dil reverse whatever you send me 
I'll wait however many seconds you send to me before responding. Try sending '3' 


Waiting Bot 
q ai ver many s 


Lady Capulet 
So shall you feel the loss, but not the friend which you weep for. 


Wi Chat - Echo Bot 


l'Il echo whatever you n 
send me 











13-1 ”完成 后 的 聊天 应 用 


13.1 阅读 背景 
在 第 10 章 和 第 11 章 中 , 我 们 用 RxJS 构 建 了 一 个 聊天 应 用 。 我 们 打算 再 构建 一 个 完全 相同 的 应 
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用 ,但 这 次 改 用 Redux。 这 样 你 就 能 对 比 同一 个 应 用 在 不 同 数据 架构 策略 下 的 实现 方式 了 。 


你 不 用 为 阅读 本 章 的 内 容 而 先 去 阅读 第 10 章 和 第 11 章 ,它们 是 相互 独立 的 。 如果 你 已 经 读 过 
了 那 两 章 ， 就 可 以 跳 过 本 章 中 代码 相同 的 那 部 分 内 容 〈 比如 ， 数 据 模型 本 身 并 没有 什么 变化 )。 


不 过 我 们 确实 希望 你 先 读 完 第 12 章 或 至 少 比较 熟悉 Redux。 


























13.2 ”聊天 应 用 概览 
这 个 应 用 提供 了 几 个 机 器 人 ， 你 可 以 和 它们 聊天 。 先 运行 这 些 代 码 看 看 : 


cd code/redux/angular2-redux-chat 
npm install 
npm run go 


MEEN Vi ae FFT JF http://localhost:8080. 


如 果 上 面 的 链接 无 法 打开 ， 请 尝试 这 个 链接 : http://localhost:8080/webpack- 
dev-server/index.html. 


A 一 些 Windows 用 户 在 这 个 目录 下 运行 npm install 时 可 能 会 遇 到 问题 。 如 果 遇 到 
了 ， 请 先 确 保 自 己 是 在 Cygwin 中 运行 这 些 命令 行 。 


在 本 应 用 中 ， 你 要 注意 以 下 几 点 : 

a 你 可 以 点 击 会 话 (thread ) 和 另 一 个 机 器 人 聊天 ; 
OQ 机 需 人 会 根据 各 自 的 性 格 来 回复 你 的 消息 ; 

a 右上 角 的 未 读 消 息 总 数 会 自动 同步 。 

下 面 来 看 看 本 应 用 是 如 何 构造 的 。 我 们 有 : 

口 三 个 顶层 Angular 组 件 

口 三 个 数据 模型 

口 两 个 reducer 及 其 各 自 的 action creator 




















我 们 来 逐个 看 看 。 
13.2.1 组件 








将 页 面 分 解 成 三 个 顶层 组 件 ， 如 图 13-2 所 示 。 





(D https://www.cygwin.com/ 
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O ChatNavBar: 包含 未 读 消息 数 。 
口 ChatThreads : 展示 一 个 可 点 击 的 会 话 列表 ， 每 个 会 话 都 包含 最 新 消息 和 会 话 头 像 。 
O ChatWindow: 展示 当前 会 话 的 消息 和 一 个 用 来 发 送 新 消息 的 输入 框 。 





@ © @ / (5 Angular 2- Chat with AxJS x | Blank 








€ — C [5 localhost:8080 





I'll echo whatever you send me 


Reverse Bot 
dil ll reverse whatever you send me 


5D inel ChatThreads 


Waiting Bot 
I'll wait however many seconds you send to me before responding. Try sending '3* 


Lady Capulet 
So shall you feel the loss, but not the friend which you weep for. 





ChatWindow 


$ Chat - Echo Bot 


I'll echo whatever you n 
send me 





write yourmesse ERAI 








图 13-2 ”Redux 聊 天 应 用 的 顶层 组 件 


13.2.2 ”数据 模型 
本 应 用 同样 包含 三 个 数据 模型 ， 如 图 13-3 所 示 。 


O User: 存储 聊天 参与 者 的 相关 信息 。 
口 Message: 存储 一 条 单独 的 信息 。 
口 Thread: 存储 一 组 消息 的 集合 以 及 一 些 与 这 次 会 话 有 关 的 其 他 数据 。 








id messages[] 


id 
name 
avatarSrc 


author name 
avatarSrc 





thread 





图 13-3 Redux 聊 天 应 用 的 数据 模型 
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13.2.3 reducer 


本 应 用 有 两 个 reducer。 


口 UsersReducer : 处 理 当 前 用 户 的 相关 信息 。 
D ThreadsReducer: 处 理会 话 及 其 相关 的 消息 。 








13.24 总 结 
大 体 来 说 ， 本 应 用 的 数据 架构 是 这 样 的 : 


a 所 有 用 户 和 会 话 〈 它 保存 着 该 会 话 的 消息 列表 ) 相关 的 信息 都 保存 在 中 心 store 之 中 ; 
a 组 件 订阅 store 的 变化 并 显示 合适 的 数据 〈 未 读 消息 数 、 会 话 列表 和 消息 列表 本 身 ); 
口 当 用 户 发 送 一 条 消息 时 ， 组 件 就 会 向 store 中 分 发 一 个 action。 


本 章 其 余部 分 将 深入 讲解 如 何 用 Angular 和 Redux 来 实现 此 应 用 。 我 们 先 实现 数据 模型 ， 然 后 
看 看 如 何 创建 应 用 的 state 和 reducer， 最 后 实现 组 件 。 



































13.3 ”实现 数据 模型 

我 们 先 从 简单 的 部 分 开始 ， 看 看 数据 模型 。 

我 们 会 用 interface (接口 ) 来 规定 每 个 数据 模型 的 定义 。 这 不 是 必需 的 ， 你 也 可 以 使 用 更 
复杂 一 些 的 对 象 。 尽 管 如 此 ， 带 方法 的 对 象 可 能 会 改变 自己 的 内 部 状态 ， 而 这 会 破坏 我 们 努力 建 
立 的 函数 式 模型 。 

也 就 是 说 , 应 用 中 state 的 所 有 变化 都 只 能 由 reducer 发 起 ; state 中 的 对 象 本 身 应 该 是 不 可 变 的 。 

因此 ， 通 过 把 数据 模型 定义 为 interface ， 就 可 以 : 

(1) 在 编译 阶段 确保 我 们 使 用 的 对 象 是 符合 预期 格式 的 ; 

(2) 减少 风险 ， 比 如 不 小 心 往 数据 模型 对 象 中 添加 了 某 个 方法 而 导致 意 想不到 的 行为 。 


13.3.1 User CN 


User 接 口中 有 id 、name 和 avatarSrc。 



















































































code/redux/angular2-redux-chat/app/ts/models/User.ts 


export interface User { 
id: string; 
name: string; 
avatarSrc: string; 
isClient?: boolean; 


316 $ 13% Æ Angular 中 引入 Redux 























我 们 还 有 一 个 布尔 值 属 性 isclient (问号 表明 这 个 字段 是 可 选 的 )。 当 使 用 本 应 用 的 是 人 而 
不 是 机 器 人 时 ， 我 们 会 把 user 中 的 该 字段 设 为 true。 














13.3.2 Thread 





同样 ，Thread 也 是 一 个 TypeScript 接 口 。 


code/redux/angular2-redux-chat/app/ts/models/Thread.ts 
export interface Thread { 

id: string; 

name: string; 

avatarSrc: string; 

messages: Message[]; 


j 
我 们 存储 了 Thread 的 id 、name 和 avatarSrc， 而 messages 字 段 中 存储 的 是 Message 的 数组 。 


13.3.3 Message 


Message 是 第 三 个 也 是 最 后 一 个 数据 模型 的 interface。 


























code/redux/angular2-redux-chat/app/ts/models/Message.ts 


export interface Message { 
id?: string; 
sentAt?: Date; 
isRead?: boolean; 
thread?: Thread; 
author: User; 
text: string; 


} 

每 条 消息 都 包含 以 下 内 容 。 

D id: 消息 的 id。 

O sentAt: 消息 的 发 送 时 间 。 

O isRead: 一 个 布尔 值 标识 ， 表 示 消 息 是 否 已 读 。 
O author: 写 这 条 消息 的 user。 

D text: 消息 的 文本 内 容 。 

D thread: 对 包含 这 条 消息 的 Thread 的 引用 。 

















13.4 ”应 用 的 state 


现在 有 了 数据 模型 ， 我 们 再 来 讨论 一 下 中 心 state 的 模型 。 在 前 一 章 中 ， 我 们 的 中 心 state 是 一 
个 对 象 。 它 有 一 个 counter 键 ， 值 的 类 型 是 一 个 number 。 然 而 这 个 应 用 的 state 就 要 复杂 多 了 。 
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下 面 是 应 用 state 的 第 一 部 分 。 








code/redux/angular2-redux-chat/app/ts/reducers/index.ts 


export interface AppState { 
users: UsersState; 
threads: ThreadsState; 

} 




















AppState 也 是 一 个 interface， 它 有 两 个 顶级 的 键 : users 和 threads。 这 两 个 键 本 身 是 通过 


两 个 接口 UsersState 和 ThreadsState 来 定义 的 ， 而 这 两 个 接口 是 在 它们 各 自 的 reducer 文 件 中 是 
义 的 。 





13.4.1 关于 代码 布局 


在 Redux 应 用 中 ， 一 种 常用 的 模式 是 : 顶级 state 中 的 每 个 reducer 都 对 应 一 个 顶级 的 键 。 这 个 
应 用 的 顶级 reducer 在 reducers/index.ts 文 件 中 。 
每 个 reducer 都 有 自己 的 文件 。 每 个 文件 中 都 有 如 下 内 容 : 
OQ 用 来 描述 state 树 当前 分 支 的 interface ; 
口 state 树 当前 分 支 的 初始 值 ; 
口 reducer 本 身 ; 
a 任何 用 来 查询 state 树 当前 分 支 的 选择 器 一 一 我 们 还 没有 讨论 过 选择 器 , 但 是 很 快 就 要 讲 到 了 。 
我 们 之 所 以 把 所 有 这 些 截然 不 同 的 东西 放 在 一 起 , 是 因为 它们 都 是 用 来 处 理 state 树 的 当前 分 
支 的 。 通 过 把 这 些 都 放 在 同一 个 文件 中 ， 可 以 很 容易 地 同时 对 它们 进行 重 构 。 


只 要 愿意 , 你 完全 可 以 使 用 多 级 符 套 的 布局 。 如 果 要 分 解 应 用 中 的 大 型 模块 , 这 是 一 种 很 好 
的 方式 。 















































13.4.2 # reducer 
讨论 到 如 何 拆 分 reducer， 我 们 来 看 看 根 reducer。 


code/redux/angular2-redux-chat/app/ts/reducers/index.ts 


export interface AppState { 
users: UsersState; 
threads: ThreadsState; 

} 


const rootReducer: Reducer<AppState> = combineReducers<AppState> ( { 
users: UsersReducer, 
threads: ThreadsReducer 


5; 
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注意 这 里 的 对 称 性 : ~UsersReducer 作用 于 users 键 ， 而 users 键 的 类 型 是 UsersState ; 
ThreadsReducer 作 用 于 threads 键 ’ 而 threads 键 的 类 型 是 ThreadsState 























combineReducers 让 这 一 切 成 为 可 能 。 它 接收 一 个 由 键 和 reducer 组 成 的 映射 表 ( map ) 并 返 
回 一 个 新 的 reducer， 这 个 新 的 reducer 可 以 根据 这 些 键 进行 相应 的 操作 。 


当然 ， 我 们 还 没 看 完 AppState 的 结构 ， 现 在 继续 。 














13.4.3 UserState 
UsersState 保 存 了 currentUser 的 一 个 引用 。 


code/redux/angular2-redux-chat/app/ts/reducers/UsersReducer.ts 


export interface UsersState { 
currentUser: User; 


E 


const initialState: UsersState = { 
currentUser: null 


E 


想象 一 下 ，state 树 的 这 条 分 支 其 实 可 以 存储 与 用 户 有 关 的 任何 信息 ， 比 如 最 后 上 线 的 时 间 、 
空闲 时 间 等 。 不 过 目前 这 样 就 足够 了 。 























下 面 我 们 会 在 定义 reducer 时 使 用 initialState， 但 此 刻 只 是 把 当前 用 户 设置 为 nul1l。 


13.4.4 ThreadsState 


来 看 一 下 ThreadsState。 





code/redux/angular2-redux-chat/app/ts/reducers/ThreadsReducer.ts 
export interface ThreadsEntities { 

[id: string]: Thread; 
} 


export interface ThreadsState { 
ids: string[]; 
entities: ThreadsEntities; 
currentThreadId?: string; 


J 


const initialState: ThreadsState = { 
ids: [], 
currentThreadId: null, 
entities: {} 


}; 
首先 定义 了 接口 ThreadsEntities。 它 是 一 个 键 为 会 话 id， 值 为 会 话 的 映射 表 。 这 样 我 们 就 
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能 在 这 个 映射 表 中 通过 id 找到 任意 一 个 会 话 了 。 


在 ThreadsState 中 还 存储 了 一 个 名 叫 idqs 的 数组 。 它 用 来 存储 在 entities 中 能 找到 的 所 有 会 
话 的 id 列表 。 





Q, 常用 类 库 normalizr "用 到 了 这 种 策略 。 它 的 理念 是 ， 一 旦 标准 化 了 在 Redux 的 
state 中 存储 实体 的 方式 ， 就 可 以 建造 辅助 类 库 并 清晰 地 使 用 它 了 。 使 用 了 
normalizr 之 后 ,我 们 就 有 了 大 量 的 选择 来 让 工作 更 高 效 ， 而 不 必 了 解 每 个 state 
树 的 格式 。 
我 决定 不 在 本 章 中 讲解 normalizr ， 因 为 还 有 许多 其 他 东西 要 学 。 不 过 我 确实 
很 喜欢 在 产品 级 应 用 中 使 用 normalizr。 
另外 ，normalizr 是 完全 可 选 的 ， 即 使 不 在 本 应 用 中 使 用 也 不 会 导致 任何 重大 
的 变化 。 
如 果 要 学 习 normalizr ， 请 查阅 官方 文档 https://github.com/paularmstrong/ 
normalizr, ##https://medium.com/@mcowpercoles/using-normalizr-js-in-a-redux- 
store-96ab3399 1369#.18ur7ipu6 f? Redux t # Dan Abramov Æ Twitter E 85 46 A 
https://twitter.com/dan_abramov/status/663032263702106112. 





























我 们 用 currentThreadId 保 存 正在 浏览 的 会 话 id， 目 的 是 了 解 用 户 正在 浏览 的 是 哪个 会 话 。 
把 initialState 都 设置 为 “ 空 值 ”。 


13.4.5 “可视化 AppState 


Redux DevTools 为 我 们 提供 了 一 个 Chart 视 图 ， 它 可 以 让 我 们 检查 应 用 的 state。 图 13-4 展 示 了 
启动 后 的 所 有 演示 数据 。 











(D https://github.com/paularmstrong/normalizr 








© Redux DevTools 


Autoselect instances 

















图 13-4 Redux 聊 天 应 用 的 状态 图 
更 棒 的 是 可 以 把 鼠标 悬 停 在 单个 节点 上 来 查看 这 条 数据 的 各 个 属性 ， 如 图 13-$ 所 示 。 
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Autoselect instances 


"name": "currentThreadId", 
"value": "tLadycap" 


m Dispatcher 








图 13-5 ”查看 当前 回话 
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13.5 #3 reducer (和 action creator) 


有 了 中 心 state， 就 可 以 用 reducer 来 改变 它 了 ! 


既然 reducer 要 处 理 action， 我 们 就 要 知道 reducer 中 action 的 格式 。 因 此 在 构建 reducer 的 同时 也 
把 action creator 构 建 出 来 。 











13.5.4 设置 当前 用 户 的 action creator 


UserState 中 存储 着 当前 用 户 ， 因 此 需要 一 个 action 来 设置 当前 用 户 。 我 们 会 在 actions 文 件 夹 
中 保存 这 些 action 文 件 ， 并 且 文 件 名 要 和 它们 对 应 的 reducer 保 持 一 致 ， 比 如 在 这 个 例子 中 的 文件 


名 是 UserActions。 











code/redux/angular2-redux-chat/app/ts/actions/UserActions.ts 


export const SET CURRENT USER = '[User] Set Current'; 
export interface SetCurrentUserAction extends Action { 
user: User; 


j 
export const setCurrentUser: ActionCreator«SetCurrentUserAction» - 
(user) => ({ 
type: SET_CURRENT_USER, 
user: user 


5 
这 里 定义 了 const SET_CURRENT_USER。 我 们 将 在 reducer 的 switch 语 句 中 使 用 它 。 


我 们 还 定义 了 一 个 新 的 子 接口 SetCurrentUserAction， 它 继承 了 Action 并 添加 了 一 个 user 
性 。 我 们 会 用 user 属 性 表明 要 把 哪个 用 户 作 为 当前 用 户 。 


函数 setCurrentUser 就 是 我 们 的 action creator 函 数 。 它 接收 一 个 user 参 数 并 返回 一 个 
SetCurrentUserAction。 我 们 要 把 这 个 返回 值 传 给 reducer 的 action。 




















Kus 
Pam) 
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13.5.2 UsersReducer: 设置 当前 用 户 


现在 我 们 把 视线 转向 UsersReducer 。 


code/redux/angular2-redux-chat/app/ts/reducers/UsersReducer.ts 


export const UsersReducer = 
function(state: UsersState = initialState, action: Action): UsersState { 
switch (action.type) { 
case UserActions.SET_CURRENT_USER: 
const user: User = (<UserActions.SetCurrentUserAction>action) .user; 
return { 
currentUser: user 
}; 
default: 
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return state; 
] 
}; 
和 所 有 reducer 一 样 UsersReducer 返回 一 个 新 的 state 。 在 这 个 例子 中 ， 它 的 类 型 是 


UsersState,; 








接 下 来 对 action.type 使 用 switch 语 句 ， 然后 处 理 UserActions . SET_CURRENT_ USER 分 X. 


为 了 设置 当前 用 户 , 我 们 需要 从 输入 的 action 中 获取 user « 为 了 做 到 这 一 点 , 首先 要 把 action 
转换 成 userActions.SetCurrentUserAction ， 然 后 读 取 它 的 .user 字 段 。 











这 似乎 有 点 奇怪 。 我 们 本 来 已 经 创建 了 SetCurrentUserAction， 但 现在 switch 
语句 中 使 用 的 却 是 字符 串 type， 并 不 是 直接 使 用 类 型 。 

实际 上 ， 这 是 受 TypeScript 所 近 。 当 TypeScript 被 编译 成 JavaScript 后 会 丢失 接口 
的 元 数据 。 我 们 也 可 以 尝试 使 用 一 些 反射 机 制 (装饰 器 元 数据 或 构造 函数 等 等 ) 
来 实现 。 

在 分 发 的 时 候 将 SetCurrentUserAction 转 换 成 Action, 在 这 里 又 要 转换 回去 , 这 
样 确实 不 够 优雅 ; 但 对 于 这 个 应 用 来 说 , 这 是 处 理 “ 多 态 分 发 ”的 一 种 简便 做 法 。 





我 们 需要 返回 一 个 新 的 UserState。 因 为 UserState 只 有 一 个 键 ， 所 以 相应 的 结果 对 象 只 有 
currentUser 键 并 用 所 传人 action 中 的 user 属 性 作为 值 。 











13.5.8 会话 和 消息 概览 


这 个 应 用 的 核心 是 会 话 中 的 消息 。 我 们 需要 实现 三 个 action: 
(1) 往 state 中 添加 一 个 新 会 话 ; 
(2) 往 会 话 中 添加 消息 ; 

(3) 选择 一 个 会 话 。 


我 们 先 来 创建 一 个 新 会 话 。 











13.5.4 ”添加 新 会 话 的 action creator 
下 面 是 用 来 往 state 中 添加 新 会 话 的 action creator. 


code/redux/angular2-redux-chat/app/ts/actions/ThreadActions.ts 


export const ADD THREAD = '[Thread] Add'; 

export interface AddThreadAction extends Action { 
thread: Thread; 

j 


export const addThread: ActionCreator«AddThreadAction» - 
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(thread) => ({ 
type: ADD_THREAD, 
thread: thread 


}); 
主意 ， 它 在 结构 上 和 我 们 的 前 一 个 action creator 非 常 相似 。 我 们 定义 了 一 个 用 在 switch 语 句 
中 的 常量 ADD_THREAD、 一 个 自 定义 的 Action 和 一 个 用 来 生成 Action 的 action creator addThread。 








这 里 并 没有 初始 化 Thread 本 身 ， 因 为 这 个 Thread 是 作为 参数 传 进来 的 。 


13.5.5 ”添加 新 会 话 的 reducer 
现在 通过 处 理 ADD_THREAD 分 支 来 创建 ThreadsReducer。 


code/redux/angular2-redux-chat/app/ts/reducers/ThreadsReducer.ts 


export const ThreadsReducer = 
function(state: ThreadsState = initialState, action: Action): ThreadsState { 
switch (action.type) { 


// Adds a new Thread to the list of entities 
case ThreadActions.ADD_THREAD: { 
const thread = («ThreadActions.AddThreadAction»action).thread; 


if (state.ids.includes(thread.id)) { 
return state; 


} 


return { 
ids: [ ...state.ids, thread.id ], 
currentThreadId: state.currentThreadId, 
entities: Object.assign({}, state.entities, { 

[thread.id]: thread 

}) 

}; 

} 


// Adds a new Message to a particular Thread 





ThreadsReducer 人 处理 的 是 ThreadsState。 当 人 处理 ADD_THREAD 这 个 action 时 ， 我 们 把 action 
对 象 类 型 又 转换 回 了 ThreadActions.AddThreadAction 并 从 中 取出 thread。 


接着 检查 在 state.ids 的 列表 中 是 否 包 含 这 个 新 的 thread.id。 如 果 已 经 有 了 ， 那 么 就 不 作 
任何 改动 ， 直 接 返 回 当 前 的 state。 


但 如 果 这 个 thread 是 新 的 ， 那 就 要 把 它 添加 到 当前 的 state 中 。 


记 住 , 创建 一 个 新 的 ThreadsState 时 要 格外 小 心 ， 不 要 修改 旧 的 state。 这 个 state 比 我 们 以 前 
接触 过 的 要 复杂 得 多 ， 但 在 处 理 原则 上 是 基本 一 致 的 。 


我 们 先 把 thread. id 添加 到 ids 数 组 中 。 这 里 使 用 了 ES6 的 展开 操作 符 C... ) 来 表明 我 们 想 
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把 所 有 现存 的 state.ids 放 和 人 新 数组 之 中 并 在 数组 结尾 处 添加 thred.id。 


添加 一 个 新 会 话 时 currentThreadId 并 没有 改变 ， 所 以 这 里 直接 返回 原来 的 state. 
currentThreadId 即 可 。 


对 于 entities ， 需 要 记 住 的 是 它 是 一 个 对 象 。 它 的 键 是 每 个 会 话 的 id 字符 串 ， 值 是 这 个 会 话 
本 身 。 这 里 使 用 ob ject .assign 来 创建 一 个 新 对 象 , 新 对 象 中 包含 了 老 的 state.entities 和 一 个 
新 的 thread 对 象 。 





























Q, * Ape rta polo EDAM ER ERRIRE? 别人 也 都 
AM! 事实 上 ， 这 样 做 会 很 容易 意外 修改 原始 数据 。 
Fs 就 是 出 现 Immutable.js 的 原因 了 。 和 Redux 一 起 使 用 p .js 通常 就 是 出 
于 这 个 目的 。Immutable 会 帮 我 们 处 理 好 这 些 原本 需要 小 心 进 行 的 更 新 。 
我 建议 你 查看 Immutablejs， 看 看 它 对 写 reducer 是 否 更 合适 。 

















现在 就 可 以 把 新 会 话 添加 到 中 心 state 里 了 1! 


13.5.6 ”添加 新 消息 的 action creator 


有 了 会 话 ， 我 们 就 可 以 开始 往 里 面 添加 消息 了 
为 添加 消息 定义 一 个 新 的 action。 





code/redux/angular2-redux-chat/app/ts/actions/ThreadActions.ts 


export const ADD_MESSAGE = '[Thread] Add Message'; 
export interface AddMessageAction extends Action { 
thread: Thread; 
message: Message; 


} 
AddMessageAction 往 会 话 中 添加 一 条 消息 。 
下 面 是 添加 新 消息 的 action creator。 


code/redux/angular2-redux-chat/app/ts/actions/ThreadActions.ts 


export const addMessage: ActionCreator<AddMessageAction> = 
(thread: Thread, messageArgs: Message): AddMessageAction => { 
const defaults = { 
id: uuid(), 
sentAt: new Date(), 
isRead: false, 
thread: thread 
d» 





(D https://facebook. github.io/immutable-js/ 
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const message: Message = Object.assign({}, defaults, messageArgs); 


return { 
type: ADD. MESSAGE, 
thread: thread, 
message: message 
H 
du 
addMessage3X faction creator 接 收 一 个 thread 和 一 个 准备 加 工 成 消息 的 对 象 。 注 意 ， 这 里 保 
留 了 一 Teron ken ila, 目的 是 把 创建 id、 es e ala KIK, X 


于 发 送信 息 的 人 来 说 ， 这 样 就 完全 不 用 关心 UUID 的 具体 格式 是 什么 


如 果 用 户 已 经 事先 用 UUID 类 库 创建 好 了 自 带 id 的 消息 ， 当 用 户 发 送 这 条 消息 时 ， 我 们 也 会 
将 它 保 存 起 来 。 为 了 实现 这 种 默认 行为 ， 先 把 messageArgs 合 并 到 defaults 之 中 ， 再 合并 到 一 个 
新 的 对 象 中 。 


最 后 ， 我 们 返回 了 带 有 thread 和 新 的 message 且 类 型 为 ADD_MESSAGE 的 action。 





















































13.5.7 ”添加 新 消息 的 reducer 


现在 我 们 要 在 ThreadsReducer 中 添加 ADD_MESSAGE 的 处 理 器 。 要 添加 一 条 新 消息 , 我 们 就 要 
获得 这 个 会 话 ， 然 后 把 消息 添加 到 这 个 会 话 中 。 


里 还 有 微妙 的 一 点 要 处 理 : 如 果 该 thread 是 当前 会 话 ， 那 就 要 将 这 条 消息 标记 为 已 读 。 


用 户 永远 都 会 有 一 个 会 话 是 当前 会 话 ， 也 就 是 他 们 正在 查看 的 会 话 。 我 们 的 意思 是 ,如 果 把 
一 条 新 消息 添加 到 了 当前 会 话 中 ， 那 么 它 就 会 被 自动 标记 为 已 读 。 


code/redux/angular2-redux-chat/app/ts/reducers/ThreadsReducer.ts 



























































case ThreadActions.ADD_MESSAGE: { 
const thread = (<ThreadActions.AddMessageAction>action).thread; 
const message = («ThreadActions.AddMessageAction»action).message; 


// special case: if the message being added is in the current thread, then 
// mark it as read 
const isRead = message.thread.id === state.currentThreadId ? 
true : message. isRead; 
const newMessage = Object.assign({}, message, { isRead: isRead }); 


// grab the old thraed from entities 
const oldThread = state.entities[thread.id]; 


// create a new thread which has our newMessage 
const newThread = Object.assign({}, oldThread, { 
messages: [...oldThread.messages, newMessage ] 


的 


return { 
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ids: state.ids, // unchanged 
currentThreadId: state.currentThreadId, // unchanged 
entities: Object.assign({}, state.entities, { 
[thread.id]: newThread 
}) 
15 
j 


// Select a particular thread in the UI 


这 段 代 码 有 点 长 ， 因 为 我 们 要 小 心地 避免 修改 原来 的 会 话 , 但 它 大 体 上 和 我 们 以 前 所 做 的 没 
什么 不 同 。 


首先 ， 提 取出 上 thread 和 message。 
如 果 这 条 消息 属于 当前 会 话 ( 接 下 来 就 会 看 到 如 何 设置 当前 会 话 ), 我 们 就 把 它 标 记 为 已 读 。 
然后 ， 我 们 抓 取 oldThread 并 把 newMessage 追 加 到 旧 的 messages 数 组 ， 以 创建 newThread。 


最 后 ， 我 们 返回 新 的 ThreadsState。 当 前 的 会 话 ids 列 表 和 currentThreadId 在 添加 一 条 新 
消息 时 都 没有 变 , 所 以 这 里 直接 使 用 原 有 值 。 唯 一 改变 的 就 是 我 们 用 newthread 更 新 了 entities。 


现在 来 实现 我 们 数据 骨架 的 最 后 一 部 分 :选择 会 话 。 









































13.5.8 ”选择 会 话 的 action creator 


用 户 可 以 同时 进行 多 个 聊天 会 话 ， 但 是 只 有 一 个 聊天 窗口 (也 就 是 用 户 可 以 阅读 和 发 送 消 
息 的 地 方 )。 当 用 户 点 击 了 一 个 会 话 ， 我们 就 要 在 聊天 窗口 中 展示 这 个 会 话 中 的 消息 ， 如 图 13-6 
所 示 。 




















Echo Bot 
I'll echo whatever you send me 
Reverse Bot * 

2 I'll reverse whatever you send me 


Waiting Bot 
l'il wait however many seconds you send to me before responding. Try sending '3 


Lady Capulet 
So shall you feel the loss, but not the friend which you weep for. 


图 13-6 ”选择 一 个 会 话 


我 们 需要 记录 哪个 会 话 是 当前 选中 的 会 话 。 要 做 到 这 一 点 ， 需 要 使 用 ThreadsState 中 的 
currentThreadId 属 性 。 
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我 们 来 创建 它 的 action 。 


code/redux/angular2-redux-chat/app/ts/actions/ThreadActions.ts 


export const SELECT_THREAD = '[Thread] Select'; 
export interface SelectThreadAction extends Action { 
thread: Thread; 


} 


export const selectThread: ActionCreator<SelectThreadAction> = 
(thread) => ({ 
type: SELECT_THREAD, 
thread: thread 


P 


这 个 action 中 并 没有 引入 新 概念 ， 只 有 新 的 动作 类 型 SELECT_THREAD 和 当前 选中 并 作为 参数 
传人 的 thread。 


13.5.9 ”选择 会 话 的 reducer 


选择 一 个 thread 需 要 做 两 件 事 : 








pum 


(1) 把 currentThreadId 设 置 为 选中 thread 的 id; 
(2) 把 这 个 thread 中 的 所 有 消息 标记 为 已 读 。 
下 面 是 这 个 reducer 的 代码 。 














code/redux/angular2-redux-chat/app/ts/reducers/ThreadsReducer.ts 


case ThreadActions.SELECT_THREAD: { 


const thread = («ThreadActions.SelectThreadAction»action).thread; 
const oldThread = state.entities[thread.id]; 


// mark the messages as read 
const newMessages = oldThread.messages.map( 
(message) => Object.assign({}, message, { isRead: true })); 


// give them to this new thread 
const newThread = Object.assign({}, oldThread, { 
messages: newMessages 


); 





return { 
ids: state.ids, 
currentThreadId: thread.id, 
entities: Object.assign({}, state.entities, { 

[thread.id]: newThread 

}) 

hi 

} 


default: 
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return state; 
} 
}; 


首先 获取 要 选择 的 thread 然 后 使 用 thread.id 从 state 中 得 到 当前 会 话 的 值 。 





Q, 这 是 个 防御 型 策略 。 为 什么 不 直接 使 用 传 进来 的 thread 呢 ?对 于 一 些 应 用 来 说 
这 也 许 是 正确 的 设计 决策 。 但 在 这 个 例子 中 ,需要 通过 读 取 state.entities 中 
会 话 的 最 后 一 个 已 知 值 来 使 thread 免 受 外 部 修改 。 

















接 下 来 ,我们 创建 所 有 旧 消 息 的 副本 并 把 它们 全 部 设置 为 sRead: true。 然 后 把 新 的 已 读 
消息 列表 赋 给 newThread。 


最 后 ， 我 们 返回 新 的 ThreadsState。 








13.5.10 reducer 总 结 
完成 了 ! 这 些 就 是 搭建 数据 架构 的 骨架 所 需 的 一 切 。 
回顾 一 下 ， UsersReducer 人 负责 维护 当 前 用 户 ， 而 ThreadsReducer 则 负 Re : 























na 











dE 
会 话 中 的 消息 列表 
口 ne 选中 的 会 话 


我 们 可 以 从 这 些 数据 中 拿 到 所 需 的 一 切 了 ( 比如 未 读 消息 数 )。 
接 下 来 就 把 它们 和 组 件 连接 在 一 起 ! 


13.6 ”构建 Angular 聊天 应 用 
如 前 所 述 ， 页 面 会 被 分 解 成 三 个 顶层 组 件 ， 如 图 13-7 所 示 。 


口 ChatNavBar : 包含 未 读 消 息 LB 
O ChatThreads: 展示 一 个 可 点 击 的 会 话 列表 ， 每 个 会 话 包含 最 后 一 条 消息 和 会 话 头像 。 
口 Chatwindow: 展示 当前 会 话 的 消息 和 一 个 用 来 发 送 新 消息 的 输入 框 。 
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| @ © @ / (s Angular 2 - Chat with RxJS x ey Blank | 
| € > © [D localhost:8080 iz 
oe 


g ERA ChatThreads 


Reverse Bot 
dil rl reverse whatever you send me 


Waiting Bot 
dil |! wait however many seconds you send to me before responding. Try sending '3' 


Lady Capulet 
So shall you feel the loss, but not the friend which you weep for. 





ChatWindow 


Wi Chat - Echo Bot 
I'll echo whatever you n 


send me 











图 13-7 Redux 聊 天 应 用 的 顶层 组 件 


我 们 要 像 上 一 童 一 样 启动 本 应 用 。 在 应 用 的 最 上 层 ， 我 们 初始 化 Redux store 并 通过 Angular 
的 依赖 注入 系统 来 提供 它 。( 如 果 觉 得 陌生 ， 请 重新 阅读 上 一 章 。) 


code/redux/angular2-redux-chat/app/ts/app.ts 


let store: Store«AppState» = createStore<AppState> ( 
reducer, 
compose(devtools) 


好 


@NgModule( { 

declarations: [ 
ChatApp, 
ChatPage, 
ChatThreads, 
ChatNavBar , 
ChatWindow, 
ChatThread, 
ChatMessage, 
FromNowPipe 

I; 

imports: [ 
BrowserModule, 
FormsModule 

E; 

bootstrap: [ ChatApp ], 

providers: [ 
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{ provide: AppStore, useFactory: () => store } 
] 
}) 
class ChatAppModule {} 


plat formBrowserDynamic( ).bootstrapModule(ChatAppModule) 


13.6.1 ”顶层 组 件 ChatApp 


ChatApp 是 顶层 组 件 ， 只 负责 演 染 chatPage 组 件 。 





code/redux/angular2-redux-chat/app/ts/app.ts 
@Component ( { 
selector: 'chat-app', 
template: ^ 
«div» 
«chat-page» «/chat-page» 
«/div» 


}) 
class ChatApp { 


constructor(@Inject(AppStore) private store: Store<AppState>) { 
ChatExampleData(store); 


} 
} 


这 个 应 用 中 机 器 人 的 数据 来 自 客 户 端 而 不 是 服务 器 端 。ChatExampleData( ) & 
数 为 应 用 设置 了 初始 数据 。 我 们 不 会 在 本 书 中 具体 解释 这 段 代 码 ， 如 果 你 想 了 
解 它 的 工作 细节 ， 可 以 随时 查阅 源 代码 。 














我 们 没有 在 这 个 应 用 中 使 用 路 由 。 如 果 要 用 的 话 , 可 以 把 与 路 由 相关 的 内 容 放 到 应 用 的 顶层 
组 件 之 中 。 现 在 只 创建 ChatPage 组 件 来 泻 染 应 用 的 主体 部 分 。 

这 个 应 用 中 没有 其 他 页 面 , 但 为 每 个 页 面 分 配 一 个 组 件 仍然 是 个 好 主意 , 毕竟 将 来 万 一 还 要 
添加 其 他 页 面 呢 。 














13.6.2 ChatPage 





聊天 页 面 会 泻 染 三 个 主要 组 件 : 


口 ChatNavBar 
D ChatThreads 
口 ChatWindow 


下 面 是 其 代码 。 








13.6 743# Angular 聊天 应 用 331 





code/redux/angular2-redux-chat/app/ts/pages/ChatPage.ts 


@Component ( f 
selector: 'chat-page', 
template: ~ 
<div> 
«chat-nav-bar»«/chat-nav-bar» 
«div class="container"> 
«chat-threads»«/chat-threads» 
«chat-window»«/chat-window» 
«/div» 
«/div» 


}) 
export default class ChatPage { 


} 


我 们 在 这 个 应 用 中 使 用 的 是 一 种 叫 作 容器 型 组 件 的 设计 模式 。 这 三 个 组 件 都 是 容器 型 组 件 。 
下 面 就 来 解释 一 下 。 





13.6.3 ”容器 型 组 件 与 展示 型 组 件 


如 果 数 据 散布 于 所 有 组 件 中 , 那么 这 个 应 用 就 会 很 难 理解 。 然 而 ,我 们 的 应 用 是 动态 的 , 组 
件 需要 运行 时 的 数据 来 填充 ， 也 需要 响应 用 户 的 交互 。 


缓解 这 种 冲突 的 模式 之 一 就 是 区 分 展示 型 组 件 与 容器 型 组 件 的 概念 。 具 体 来 说 是 这 样 的 : 

(1) 要 让 与 外 部 数据 源 (例如 API、Redux store 、Cookies 等 ) 交互 的 组 件 尽 可 能 少 ; 

(2) 要 有 意识 地 将 数据 访问 放 在 容器 型 组 件 之 中 ; 

(3) 对 于 纯 “ 功 能 性 ”的 展示 型 组 件 ， 要 求 它 的 所 有 属性 (输入 和 输出 ) 都 由 容器 型 组 件 来 
管理 。 

这 种 设计 的 好 处 在 于 展示 型 组 件 的 行为 是 可 预测 的 。 它 们 可 以 复 用 , 因为 它们 只 关心 自己 用 
到 的 那 部 分 数据 ， 从 不 对 整体 的 数据 架构 作出 任何 假设 。 

即使 不 考虑 可 复 用 性 ,其 可 预测 性 也 是 一 个 优点 。 对 于 相同 的 输入 , 它们 总 是 会 给 出 相同 的 
输出 ( 比如 用 相同 的 方式 演 染 )。 






























































仔细 想 想 ， 你 会 发 现 要 求 reducer 必 须 是 纯 函 数 和 要 求 展示 型 组 件 必须 是 “ 纯 组 
件 ” 背 后 的 哲学 是 一 样 的 。 





























如 果 整 个 应 用 全 都 是 展示 型 组 件 , 那 是 最 理想 的 。 但 现实 世界 中 的 数据 是 杂乱 、 不 断 变化 的 ， 
所 以 我 们 可 以 试 着 把 用 来 适应 真实 世界 的 各 种 复杂 数据 封装 到 容器 型 组 件 中 。 
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如 果 你 是 高 级 程序 员 , 可 能 会 发 现在 MVC 和 容器 /展示 型 组 件 之 间 存 在 着 一 种 不 
大 准确 的 比喻 。 也 就 是 说 ， 展示 型 组 件 类 似 于 所 传 入 数据 的 “视图 ”， 而 容器 型 
组 件 则 类 似 于 “控制 器 ”"， 它 接收 “数据 模型 ”( 应 用 其 他 部 分 的 数据 ) 并 在 进 
行 适 配 之 后 传 给 展示 型 组 件 。 

但 如 果 你 还 是 编程 界 的 新 兵 ， 那 就 先 别 试图 理解 “Angular 组 件 本 身 就 是 视图 和 
控制 器 ”这 种 比喻 了 。 








在 这 个 应 用 中 , 容器 型 组 件 就 是 那些 和 store 交 互 的 组 件 。 这 表示 容器 型 组 件 符合 下 列 三 种 特征 : 
(1) 从 store 中 读 取 数据 ; 

(2) 订阅 store 的 变化 ; 

(3) 向 store 中 分 发 action 。 


这 里 的 三 个 主要 组 件 都 是 容器 型 组 件 ， 而 它们 所 包含 的 组 件 都 是 展示 型 的 〈 也 就 是 功能 性 的 / 
纯粹 的 /不 和 store 交 互 的 )。 


接 下 来 构建 第 一 个 容器 型 组 件 : 导航 条 。 











13.7 #43 ChatNavBar 
导航 条 中 要 显示 当前 用 户 的 未 读 消 息 数 ， 如 图 13-8 所 示 。 








ng-book 2 Messages © 


ME Echo Bot « 








图 13-8 ChatNavBar 组 件 中 的 未 读数 


Q, 试验 未 读 消息 数量 最 好 的 办 法 是 使 用 等 待机 器 人 (Waiting Bot )。 如 何 你 还 没有 
试 过 ， 尝 试 发 消息 “3” 给 等 待机 器 人 ， 然 后 切换 到 其 他 聊天 窗口 。 等 待机 器 人 
会 等 3 秒 再 给 你 回复 消息 ， 这 样 你 就 会 看 到 未 读 消息 数量 的 增长 。 


先 来 看 看 组 件 代码 。 


code/redux/angular2-redux-chat/app/ts/containers/ChatNavBar.ts 


@Component ( { 
selector: 'chat-nav-bar', 
template: ^ 
«nav class-"navbar navbar-default"'» 
«div class-"container-fluid"» 
«div class-"navbar-header"» 
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«a class-"navbar-brand" hrefz"https://ng-book.com/2"» 
<img src-"$(require('images/1ogos/ng-book-2-minibook.png')]"/» 
ng-book 2 
«/a» 
«/div» 
«p class="navbar-text navbar-right"» 
«button class="btn btn-primary" type="button"> 
Messages «span class="badge">{{ unreadMessagesCount }}</span> 
«/button» 
</p> 
</div> 
</nav> 


}) 
export default class ChatNavBar { 


unreadMessagesCount: number; 


constructor(@Inject(AppStore) private store: Store«AppState») { 
store.subscribe(() => this.updateState()); 
this.updateState(); 

j 


updateState() { 
this.unreadMessagesCount - getUnreadMessagesCount(this.store.getState()); 


} 
} 


Bi A Fe THEE T DOMAZSTAURHTECURS SEAR TG HJCSS. (这些 CSS 类 来 自 CSS 框 架 Bootstrap ). 











在 这 个 模板 中 ， 我 们 唯一 要 显示 的 变量 是 unreadMessagesCount 。 

ChatNavBar 组 件 中 的 unreadMessagesCount 是 一 个 实例 变量 。 它 会 被 设置 成 所 有 会 话 的 未 读 
消息 总 数 。 

注意 ， 我 们 在 constructor 中 做 了 三 件 事 : 

(1) EA f store; 

(2) 订阅 了 store 中 的 任何 变化 ; 

(3) 调用 了 this.updateState()。 


我 们 在 subscribe 后 调用 了 this.updateState() ， 因 为 要 确保 组 件 使 用 最 新 数据 进行 初始 
化 。subscribe 只 会 在 组 件 初 始 化 之 后 state 数 据 发 生变 化 的 时 候 调 用 。 


updateState() 是 最 有 意思 的 函数 一 一 我 们 把 unreadMessagesCount 设 置 为 getUnread- 
MessagesCount 了 负数 的 返回 值 。getUnreadMessagesCount 是 什么 ” 它 从 哪里 来 ? 

































































getUnreadMessagesCount 是 一 个 名 叫 选择 器 ( selector ) 的 新 概念 。 
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13.7.4 Redux 选择 器 
思考 一 下 AppState ， 我 们 该 如 何 获取 未 读 消 息 总 数 呢 ? 像 下 面 这 样 如 何 : 


// get the state 
let state = this.store.getState(); 





// get the threads state 
let threadsState = state.threads; 


// get the entities from the threads 
let threadsEntities = threadsState.entities; 


// get all of the threads from state 
let allThreads = Object.keys(threadsEntities) 
.map((threadId) => entities[threadId] ); 








// iterate over all threads and ... 
let unreadCount = allThreads.reduce( 
(unreadCount: number, thread: Thread) => { 
// foreach message in that thread 
thread.messages.forEach((message: Message) => { 
if (!message.isRead) { 
// if it's unread, increment unread count 
++unreadCount; 
} 
135 
return unreadCount; 
F; 
0); 


我 们 应 该 把 这 段 逻辑 放 在 ChatNavBar 组 件 中 吗 ? 如 果 这 人 么 做 的 话 ， 会 有 如 下 两 个 问题 


(1) 这 一 大 块 代码 深 深 地 渗透 到 了 Appstate 中 。 更 好 的 方法 是 把 这 段 逻 辑 移 到 所 涉及 的 state 
之 后 。 


(2) 如 果 应 用 的 其 他 地 方 需要 显示 未 读 消息 总 数 呢 ?如何 共享 这 段 逻 辑 ? 
选择 器 背后 的 思想 可 用 来 解决 这 些 问题 : 























选择 器 是 函数 ， 它 接收 部 分 state 并 返回 一 个 值 。 
我 们 来 看 看 如 何 创 建 选择 需 。 


13.7.2 ”会话 选择 器 
先 从 简单 的 部 分 开始 。 假 设 我 们 要 在 AppState 中 获取 ThreadsState。 


code/redux/angular2-redux-chat/app/ts/reducers/ThreadsReducer.ts 
export const getThreadsState = (state): ThreadsState => state.threads; 
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相当 简单 ,对 不 对 ” 只 要 给 定 了 顶层 的 AppState, 就 可 以 通过 state.threads 找 到 Threads- 
State。 


如 果 我 们 要 获取 当前 会 话 ， 可 以 这 样 做 : 


const getCurrentThread = (state: AppState): Thread => { 
let currentThreadId = state.threads.currentThreadId; 
return state.threads.entities[currentThreadId]; 


} 


对 于 这 个 小 例子 来 说 , 这 样 的 选择 器 就 可 以 胜任 。 值 得 考虑 的 是 ， 如 何 随 着 应 用 的 增长 让 选 
择 器 更 具 可 维护 性 。 如 果 能 用 选择 器 来 查询 其 他 选择 器 就 好 了 。 如 果 一 个 选择 器 能 指定 多 个 其 他 
选择 器 作为 自己 的 依赖 就 更 好 了 。 

这 些 正 是 reselect" 类 库 提供 的 。 利 用 reselect ， 我 们 可 以 创建 更 小 、 更 专注 的 选择 器 ， 还 
能 结合 它们 实现 更 大 的 功能 。 


下 面 来 看 看 如 何 使 用 reselect 提 供 的 createSelector 方 法 获取 当前 会 话 。 





























code/redux/angular2-redux-chat/app/ts/reducers/ThreadsReducer.ts 


export const getThreadsEntities = createSelector( 
getThreadsState, 
( state: ThreadsState ) => state.entities ); 
先 来 写 一 个 getThreadsEntities 选 择 器 。getThreadsEntities 使 用 createSelector 并 传人 
两 个 参数 : 
(1) 之 前 定义 的 选择 需 getThreadsState; 
(2) 一 个 回调 函数 ， 用 于 接收 getThreadsState 选 择 器 的 返回 值 ， 并 返回 我 们 要 选取 的 值 。 


这 里 只 获取 了 state.entities ， 看 起 来 似乎 有 点 浪费 ， 但 它 为 我 们 建立 了 可 维护 性 更 强 的 
选择 器 。 现在 看 看 如 何 用 createSelector 创 建 getCurrentThread。 




















code/redux/angular2-redux-chat/app/ts/reducers/ThreadsReducer.ts 


export const getCurrentThread = createSelector( 
getThreadsEntities, 
getThreadsState, 
( entities: ThreadsEntities, state: ThreadsState ) => 
entities[state.currentThreadId] ); 


yee 
EI 


意 , 这 里 引用 了 两 个 选择 器 作为 依赖 ; getThreadsEntities 和 getThreadsState。 这 些 选 
择 器 被 解析 后 就 会 变 成 回调 函数 的 参数 。 我 们 可 以 把 它们 组 合 起 来 返回 当前 选中 的 会 话 。 








(D https://github.com/reactjs/reselect#createselectorinputselectors--inputselectors-resultfunc 
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13.7.3 zki 肖 息 总 数 选 先 择 器 


现在 我 们 已 经 理解 了 选择 器 的 工作 原理 ， 接 着 就 来 创建 一 个 选择 器 以 获取 未 读 消 息 的 数量 。 
如 果 看 过 前 面 获取 未 读 消息 总 数 的 首次 尝试 , 你 会 发 现 每 个 变量 都 可 以 被 蔡 换 成 它们 自己 的 选择 
fit ( getThreadsState , getThreadsEntities 4f J 


Pit e AOR ET A Thread B ee ss 


code/redux/angular2-redux-chat/app/ts/reducers/ThreadsReducer.ts 


export const getAllThreads - createSelector( 
getThreadsEntities, 
( entities: ThreadsEntities ) => Object.keys(entities) 
.map((threadId) => entities[threadId])); 


拿 到 所 有 会 话 之 后 ， 我 们 就 可 以 知道 所 有 会 话 中 的 未 读 消 息 总 数 。 


code/redux/angular2-redux-chat/app/ts/reducers/ThreadsReducer.ts 


export const getUnreadMessagesCount = createSelector( 
getAllThreads, 
( threads: Thread[] ) => threads.reduce( 
(unreadCount: number, thread: Thread) => { 
thread.messages.forEach((message: Message) => { 
if (!message.isRead) { 
++unreadCount; 
} 
2); 
return unreadCount; 
J 
0)); 


有 了 这 个 选择 器 ， 我 们 就 可 以 在 chatNavBar 组 件 中 (以 及 应 用 中 任何 需要 的 地 方 ) 获取 到 
未 读 消息 的 数量 。 























13.8 构建 ChatThreads 组 件 
接 下 来 在 ChatThreads 组 件 中 构建 会 话 列 表 ， 如 图 13-9 所 示 。 


Echo Bot * 
l'Il echo whatever you send me 
Reverse Bot 

3 I'll reverse whatever you send me 
Waiting Bot 
I'll wait however many seconds you send 
to me before responding. Try sending '3' 


Lady Capulet 
So shall you feel the loss, but not the 
friend which you weep for. 


图 13-9 ”按时 间 排 序 的 会 话 列 表 
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13.8.1 ChatThreads 控制 器 
在 查看 ChatThreads 组 件 的 模板 之 前 ， 我 们 先 来 看 看 组 件 的 控制 器 。 


code/redux/angular2-redux-chat/app/ts/containers/ChatThreads.ts 


export default class ChatThreads { 
threads: Thread[]; 
currentThreadId: string; 


constructor(@Inject(AppStore) private store: Store<AppState>) { 
store.subscribe(() => this.updateState()); 
this.updateState(); 

j 


updateState() { 
let state - this.store.getState(); 


// Store the threads list 
this.threads - getAllThreads(state); 


// We want to mark the current thread as selected, 

// so we store the currentThreadId as a value 

this.currentThreadId - getCurrentThread(state).id; 
} 


handleThreadClicked(thread: Thread) { 
this.store.dispatch(ThreadActions.selectThread(thread)); 
j 
j 


在 这 个 组 件 中 存储 了 两 个 实例 变量 。 
O threads: Zt. 
O currentThreadId: 用 户 正在 操作 的 当前 会 话 。 


TEconstructor 中 保存 了 一 个 Redux store 的 引用 并 订阅 更 新 。 一 旦 store 发 生变 化 ， 就 调用 
updateState(), 


updateState( ) 会 保持 实例 变量 与 Redux store 同 步 。 注 意 我 们 正在 用 的 这 两 个 选择 器 : 


口 getAllThreads 
DQ getCurrentThread 


这 样 就 可 以 保持 它们 各 自 的 实例 变量 总 是 最 新 的 。 


这 里 引入 了 一 个 新 概念 : 事件 处 理 器 handleThreadClicked。handleThreadClicked 会 分 发 
selectThread 这 个 action。 当 点 击 一 个 会 话 时 ， 我 们 就 告诉 store 把 这 个 新 会 话 设 为 所 选 会 话 并 且 
应 用 的 其 余部 分 也 应 该 依次 更 新 。 
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13.8.2 ChatThreads BJ template 


我 们 来 看 一 下 chatThreads 组 件 的 template 及 其 配置 。 


code/redux/angular2-redux-chat/app/ts/containers/ChatThreads.ts 


*/ 
@Component ( f 
selector: 'chat-threads', 
template: ^ 
«1-- conversations --» 


«div class="row"> 
«div class="conversation-wrap"> 


«chat-thread 


*ngFor="let thread of threads" 
[thread]="thread" 
[selected]="thread.id === currentThreadId" 


(onThreadSelected)="handleThreadClicked($event)"> 
«/chat-thread» 


«/div» 
«/div» 





我 们 在 模板 中 使 用 ngFor 来 遍历 threads 。 我 们 还 用 了 一 个 叫 作 chatThread 的 新 组 件 来 泻 染 


单个 会 话 。 




















ChatThread 是 一 个 展示 型 组 件 。 在 ChatThread 中 ， 我 们 既 不 能 使 用 store ， 也 不 能 读 取 数据 


和 分 发 action。 反 之 , 我 们 要 通过 inputs ( 输入 参数 ) 来 传人 该 组 件 所 需 的 一 切 ， 并 通过 outputs 
(输出 参数 ) 来 处 理 任何 交互 。 


接着 我 们 会 介绍 ChatThread 的 实现 ， 但 先 来 看 看 这 个 模板 中 的 输入 和 输出 。 




















O 使 用 单个 thread 变 量 作为 输入 属性 [thread] ; 


O 对 于 输入 属性 [selected], 我 们 传人 一 个 布尔 值 来 表明 这 个 会 话 (thread.id ) 是 
前 会 话 (currentThreadld ); 


口 如 果 会 话 被 点 击 ， 





否 是 当 


就 发 出 输出 事件 (onThreadSelected)。 这 时 就 会 调用 handleThread- 
Clicked() ( 它 会 问 store 中 分 发 选择 会 话 的 事件 )。 


我 们 再 来 研究 一 下 chatThread 组 件 。 


13.9 ”单个 ChatThread 组 件 





ChatThread 组 件 用 来 显示 会 话 列表 中 一 个 单独 的 会 








只 会 操作 直接 给 它 的 那些 数据 。 








因为 它 是 一 个 展示 








型 组 件 ， 所 以 我 们 将 它 放 在 app/ts/components 文 件 夹 中 。 


话 。 记 住 cChatThread 是 展示 型 组 件 ， 它 
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下 面 是 组 件 控制 器 的 代码 。 


code/redux/angular2-redux-chat/app/ts/components/ChatThread.ts 


export default class ChatThread { 
thread: Thread; 
selected: boolean; 
onThreadSelected: EventEmitter<Thread> ; 


constructor() { 
this.onThreadSelected = new EventEmitter<Thread>(); 


} 


clicked(event: any): void { 
this.onThreadSelected.emit(this.thread); 
event.preventDefault(); 


i 
} 


这 里 的 看 点 是 onThreadSelected 这 个 EventEmitter。 如 果 你 还 没 怎么 用 过 EventEmitter , 
可 以 把 它 当 作 观 察 者 模式 的 一 种 实现 。 我 们 把 它 作为 这 个 组 件 的 “输出 通道 ” 想 发 送 数据 时 
ti 调用 onThreadSelected.emit 方 法 ， 把 想 要 发 送 的 数据 传 进去 。 
在 这 个 例子 中 ， 我 们 想 把 当前 会 话 作为 参数 传 给 EventEmitter 。 当 点 击 这 个 元 素 时 ， 我 们 
就 会 调用 onThreadSelected.emit(this.thread)， 它 会 触发 父 级 组 件 (ChatThreads ) 中 的 回 


























&ur 











ChatThread BJeComponent A template 














下 面 是 ecomponent 注 解 和 template 的 代码 。 


code/redux/angular2-redux-chat/app/ts/components/ChatThread.ts 


@Component ( f 
inputs: ['thread', 'selected'], 
selector: 'chat-thread', 
outputs: ['onThreadSelected'], 
template: ~ 
<div class="media conversation"> 
«div class="pull-left"> 
«img class="media-object avatar" 
src="{{thread.avatarSrc}}"> 
</div> 
«div class="media—body"> 
«h5 class-"media-heading contact-name"> {{thread.name} } 
«span xngI f="selected">&bull; </span> 
«/h5» 
«small class="message-preview" > 
((thread.messages[thread.messages.length - 1].text}} 
«/small» 
«/div» 
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«a (click)="clicked($event)" class-"div-link"»Select«/a» 
«/div» 


























这 里 把 thread 和 selected 指 定 为 inputs 属 性 ， 把 onThreadSelected 指 定 为 outputs 属 性 。 


注意 ,视图 中 使 用 了 一 些 直接 的 绑 定 ， 比如 { {thread.avatarSrc}} 和 {{thread.name}}。 在 





class 为 message-preview 的 标签 中 有 如 下 代码 : 
{{ thread.messages[thread.messages.length - 1].text }} 
它 会 获取 会 话 中 的 最 后 一 条 消息 并 显示 消息 的 文本 ， 目 的 是 在 每 个 会 话 中 显示 最 新 消 
预览 。 


我 们 还 用 了 xngIf， 会 对 选中 的 会 话 显示 &bul1; 符 号 。 














息 的 


最 后 ,我 们 绑 定 了 (click) 事 件 来 调用 clicked( ) 人 处 理 器 。 注 意 ,我 们 在 调用 clicked 时 传人 

















了 参数 $event 。 这 是 Angular 提 供 的 一 个 用 来 描述 事件 的 特殊 变量 。 我 们 通过 在 cl ickeq 处 理 





调用 event .preventDefault() ;来 使 用 它 。 这 样 可 以 确保 我 们 不 会 跳 转 到 其 他 页 面 。 


13.10 ”构建 ChatWindow 组 件 
Chatwindow 是 这 个 应 用 中 最 复杂 的 组 件 〈 如 图 13-10 所 示 )。 我 们 一 步 一 步 来 完成 它 。 


Chat - Reverse Bot 
I'll reverse whatever you send me n 











图 13-10 ”聊天 窗口 











an 


Chatwindow 类 有 三 个 属性 : currentThread ( 其 中 包括 messages ). draftMessage fil 


currentUser,» 


code/redux/angular2-redux-chat/app/ts/containers/ChatWindow.ts 


export default class ChatWindow { 
currentThread: Thread; 
draftMessage: { text: string }; 
currentUser: User; 
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图 13-11 表 明了 每 一 个 属性 在 何 处 使 用 。 





currentUser 








draftMessage 











图 13-11 ”聊天 窗口 的 属性 
我 们 在 constructor 中 注入 了 两 样 东 西 。 














code/redux/angular2-redux-chat/app/ts/containers/ChatWindow.ts 


constructor (@Inject(AppStore) private store: Store<AppState>, 
private el: ElementRef) { 
store.subscribe(() => this.updateState() ); 
this.updateState(); 
this.draftMessage = { text: '' }; 
j 


第 一 个 是 Redux store， 第 二 个 是 el。el 是 一 个 ElementRef ， 可 以 用 来 获取 宿主 DOM 元 素 。 
当 创 建 和 接收 新 消息 的 时 候 ， 我 们 会 借助 它 来 让 聊天 窗口 滚动 到 底部 。 
我 们 在 构造 函数 中 订阅 了 store， 就 像 在 其 他 容器 型 组 件 中 所 做 的 那样 。 


接着 要 做 的 是 设置 一 个 默认 的 draftMessage， 它 的 text 属 性 是 一 个 空 字符 串 。 我 们 会 使 用 
draftMessage 来 记录 用 户 在 输入 框 中 输入 的 消息 。 


















































13.10.1 ChatWindow 的 updateState() 
当 store 改 变 时 ， 我 们 会 更 新 该 组 件 的 实例 变量 。 


code/redux/angular2-redux-chat/app/ts/containers/ChatWindow.ts 


updateState() { 
let state = this.store.getState(); 
this.currentThread = getCurrentThread(state); 
this.currentUser = getCurrentUser(state); 
this.scrollToBottom(); 

j 


我 们 存储 了 当前 会 话 和 当前 用 户 。 如 果 来 了 新 消息 , 我们 希望 滚动 到 窗口 的 底部 。 在 这 里 调 
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用 scrollToBottom 有 点 粗粮， 但 这 种 简单 的 方法 可 以 保证 在 有 新 消息 时 《〈 或 用 户 切 换 到 一 个 新 
会 话 中 时 ) 用 户 不 需要 每 次 都 手动 滚动 窗口 。 





13.10.2 ChatWindow 的 scrollToBottom() 


为 了 滚动 到 聊天 窗口 的 底部 ， 我 们 将 使 用 保存 在 构造 函数 中 的 类 型 为 ElementRef 的 el 。 要 
让 这 个 元 素 滚动 ， 就 要 设置 宿主 元 素 的 scrol 1Top 属 性 。 

















code/redux/angular2-redux-chat/app/ts/containers/ChatWindow.ts 


scrollToBottom(): void { 
let scrollPane: any = this.el 
.nativeElement.querySelector('.msg-container-base'); 


if (scrollPane) ( 
setTimeout(() => scrollPane.scrollTop = scrollPane.scrollHeight); 


} 
} 


o 为 什么 使 用 setTimeout? 
如 果 我 们 得 到 新 消息 时 立即 调用 scroll1ToBottom， 那么 滚动 到 底部 的 动作 就 是 


在 新 消息 泻 染 完成 之 前 执行 的 。 使 用 setTimeout 可 以 告诉 JavaScript 我 们 要 在 当 
前 执行 队列 完成 后 再 运行 这 个 函数 。 该 函数 会 在 组 件 演 染 完成 之 后 执行 ， 这 正 
是 我 们 想 要 的 效果 。 


13.10.3 ChatWindow 的 sendMessage 
如 果 我 们 要 发 送 一 条 新 消息 ， 就 要 先 拿 到 : 
口 当前 会 话 
a 当前 用 户 
口 草稿 消息 的 文本 
然后 向 store 中 分 发 一 个 新 的 addMessage action。 下 面 是 其 代码 。 











code/redux/angular2-redux-chat/app/ts/containers/ChatWindow.ts 


sendMessage(): void { 
this.store.dispatch(ThreadActions.addMessage( 
this.currentThread, 
( 
author: this.currentUser, 
isRead: true, 
text: this.draftMessage.text 
j 
); 
this.draftMessage = { text: '' }; 


} 
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sendMessage 函数 接收 dra ftMessage 人 参数 并 用 组 件 的 属性 来 设置 author 和 thread ,每 条 已 发 
送 的 信息 其 实 都 已 经 被 读 过 了 因为 是 我 们 写 的 )， 所 以 将 其 标记 为 已 读 。 


分 发 这 条 消息 之 后 ， 创 建 一 个 新 的 Message 对 象 并 把 它 赋 给 this.draftMessage。 这 会 清空 
输入 框 。 创 建 一 个 新 对 象 可 以 确保 我 们 不 会 改变 已 经 发 送 给 store 的 消息 。 




















13.10.4 ChatWindow 的 onEnter 
在 视图 中 ， 我 们 希望 在 下 面 两 种 场景 发 送 消息 : 
(1) 用 户 点 击 Send 按 钮 ; 
(2) HIP iti In] AE SEE 
我 们 定义 一 个 函数 来 处 理 这 两 种 事件 。 


code/redux/angular2-redux-chat/app/ts/containers/ChatWindow.ts 











onEnter(event: any): void { 
this.sendMessage(); 
event.preventDefault(); 


j 


我 们 创建 onEnter 事 件 处 理 器 并 把 sendMessage 作 为 一 个 单独 的 函数 , 这 是 因为 
onEnter 要 接收 一 个 参数 event 并 调用 event .preventDefault()。 这 种 方式 下 我 
们 还 可 以 在 响应 浏览 器 事件 之 外 的 场景 下 调用 sendMessage。 在 这 个 例子 中 ， 
我 们 并 没有 真 的 在 其 他 场景 下 调用 sendMessage ， 但 我 发 现 把 “真正 干 活 的 ” 
函数 从 事件 处 理 器 中 独立 出 来 会 更 好 。 

否则 ，sendMessage 函 数 就 会 : (1) 要 求 必须 传 入 一 个 事件 对 象 ; (2) 处 理 该 事件 
对 象 。 但 是 这 样 一 来 它 的 关注 点 就 太 多 了 。 


现在 已 经 处 理 好 了 控制 器 的 代码 ， 让 我 们 来 看 看 template。 





13.10.5 ChatWindow 的 template 
我 们 先 从 面板 (panel) 的 起 始 标签 开始 ， 并 且 在 头 部 显示 聊天 的 名 称 。 


code/redux/angular2-redux-chat/app/ts/containers/ChatWindow.ts 





@Component ( f 
selector: 'chat-window', 
template: ~ 
«div classz"chat-window-container"» 
«div classz"chat-window"» 
«div class="panel-container"> 
«div class="panel panel-default"» 
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«div class-"panel-heading top-bar"» 
«div classz"panel-title-container"» 
«h3 class-"panel-title"» 
«span class-"glyphicon glyphicon-comment"»«/span» 
Chat - {{currentThread.name}} 
«/h3» 
«/div» 
«div classz"panel-buttons-container" > 
<!-- you could put minimize or close buttons here --» 
«/div» 
«/div» 


«div class="panel-—body msg-container-base"» 


接 下 来 显示 消息 列表 。, 这 里 用 ngFor 遍 历 消息 列表 。, 我 们 稍 后 会 讲解 单个 chat-message 组 件 。 




















code/redux/angular2-redux-chat/app/ts/containers/ChatWindow.ts 


«chat-message 
angFor="let message of currentThread.messages" 
[message]-"message"» 
«/chat-message» 
«/div» 


«div class-"panel-footer"» 


最 后 是 消息 输入 框 和 各 个 结束 标签 。 











code/redux/angular2-redux-chat/app/ts/containers/ChatWindow.ts 


«div class-"input-group"» 
«input type="text" 
classz"chat-input" 
placeholder="Write your message here... 
(keydown. enter )="onEnter ($event )" 
[(ngModel )]="draftMessage. text" /> 
<span class="input-—group—btn" > 
«button class="btn-chat" 
(click)="onEnter ($event)" 
»Send«/button» 
«/span» 
«/div» 
«/div» 


«/div» 
«/div» 
«/div» 
«/div» 


}) 
export default class ChatWindow { 


消息 输入 框 是 视图 中 最 有 意思 的 部 分 ,我 们 来 看 看 其 中 两 个 有 趣 的 属 
和 [(ngModel)] 。 























PE: (keydown.enter ) 
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13.10.6 ”处 理 键盘 动作 


Angular 提 供 了 一 种 简明 的 方式 来 处 理 键盘 动作 : 在 元 素 上 绑 定 事 件 。 在 这 个 例子 中 ， 我 们 
绑 定 了 keydown.enter 。 这 表示 如 果 用 户 按 下 回 车 键 ， 就 会 调用 表达 式 里 的 子 数 onEnter 
($event ) 。 

















code/redux/angular2-redux-chat/app/ts/containers/ChatWindow.ts 


classz"chat-input" 
placeholder="Write your message here..." 
(keydown. enter )="onEnter ($event)" 
[(ngModel )]="draftMessage. text" /> 

«span class-"input-group-btn"» 


13.10.7 使 用 ngModel 

如 前 所 述 ，Angular 并 没有 像 AngularJS 那 样 把 双向 绑 定 作为 数据 架构 的 核心 。 特 别 是 当 我 们 
使 用 Redux 的 时 候 ， 它 是 完全 的 单 向 数据 流 。 

然而 在 组 件 及 其 视图 之 间 进 行 双向 绑 定 是 非常 有 用 的 。 只 要 把 双 回 绑 定 的 坏处 限制 在 组 件 之 
中 ， 保 持 组 件 属性 和 视图 的 同步 是 很 方便 的 。 

对 于 这 个 例子 ,我 们 在 输入 框 的 值 和 qdqraftMessage.text 之 间 建 立 了 一 个 双向 绑 定 。 如 果 在 
输入 框 中 输入 文字 ，draftMessage .text 就 会 自动 设置 为 输入 的 文字 。 同 样 ， 如 果 在 代码 中 更 新 
draftMessage.text, 那么 视图 中 输入 框 的 值 也 会 随 之 改变 。 






























































13.10.8 AE Send 按钮 
在 Send 按 钮 上 将 (click) 属 性 绑 定 到 组 件 中 的 onEnter 范 数 。 








code/redux/angular2-redux-chat/app/ts/containers/ChatWindow.ts 


(click )="onEnter($event)" 
»Send«/button» 
«/span» 


我 们 使 用 同一 个 onEnter 函 数 来 处 理 本 事件 。 也 就 是 说 ， 点 击 这 个 按钮 和 按 回 车 键 都 可 以 发 
送 消 息 。 























13.11 ChatMessage 组 件 

















我 们 没有 把 泻 染 单个 消息 的 代码 都 放 到 chatwindow 组 件 中 ， 而 是 创建 了 另 一 个 展示 型 组 件 
ChatMessage。 
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Q, 提示 : 如 果 你 发 现 自己 正在 使 用 ngFor ， 那 就 表示 你 该 创建 一 个 新 组 件 了 。 





每 条 消息 都 是 通过 ChatMessage 组 件 泻 染 的 ， 如 图 13-12 所 示 。 





Chat - Reverse Bot 


I'll reverse whatever you send me 


| Write your n message 


ChatMessage 





图 13-12 ”ChatMessage 组 件 


该 组 件 相对 简明 ， 其 主要 逻辑 是 根据 消息 是 否 由 当前 用 户 所 创建 来 泻 当 出 略 有 不 同 的 视 网 。 
如 果 该 消息 不 是 当前 用 户 创建 的 ， 就 认为 消息 是 收 到 的 ( incoming)。 























13.11.1 设置 incoming 属性 





记 住 ， 每 个 chatMessage 组 件 都 属于 一 条 Message 。 因 此 ， 要 在 ngonInit 方 法 里 订阅 
currentUser 流 并 根据 这 条 Message 是 否 由 当前 用 户 创建 来 设置 incoming。 

















code/redux/angular2-redux-chat/app/ts/components/ChatMessage.ts 


export default class ChatMessage implements OnInit { 
message: Message; 
incoming: boolean; 


ngOnInit(): void { 
this.incoming = !this.message.author.isClient; 
} 
} 


13.11.2 ChatMessage B template 
在 template 中 有 两 点 值得 注意 : 


(1) FromNowPipe 管 道 








(2) [ngclass] 属性 
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先 来 看 其 代码 。 
code/redux/angular2-redux-chat/app/ts/components/ChatMessage.ts 
*/ 
@Component( { 

inputs: ['message'], 

selector: 'chat-message', 

template: ` 

<div class="msg-container" 

[ngClass]="{'base-sent': !incoming, 'base-receive': incoming}"> 


<div class="avatar" 
xngIf="!incoming"> 
<img src="{{message.author.avatarSrc}}"> 
</div> 


<div class="messages" 
[ngClass]="{'msg-sent': !incoming, 'msg-receive': incoming}"> 
<p>{{message.text}}</p> 
<p class="time">{{message.sender}} e {{message.sentAt | fromNow}}</p> 
</div> 


<div class="avatar" 
«ngI f="incoming"> 
<img src="{{message.author.avatarSrc}}"> 
</div> 
</div> 








FromNowPipe 是 一 个 管道 , 把 消息 的 发 送 时 间 转 换 为 像 “x 秒 前 ”这 样 对 用 户 友 好 的 信息 。 如 
你 所 见 ， 我 们 要 这 样 使 用 它 : {{message.sentAt | fromNow}}. 











o FromNowPipe 使 用 优秀 的 moment .js 类 库 。 如 果 你 想 学 习 如 何 创 建 自 定义 管道 ， 
可 以 阅读 FromNowPipe 的 源 代 码 : code/rxjs/chat/app/ts/util/FromNowPipe.ts. 
我 们 也 在 视图 中 充分 利用 了 ngclass。 当 这 样 写 时 : 
[ngClass]-"('msg-sent': !incoming, 'msg-receive': incoming)" 
我 们 是 在 告诉 Angular: 如 果 incoming 为 真 就 使 用 msg-receive 类 ( 否则 使 用 msg-sent 类 )。 
借助 incoming 属 性 ， 我 们 就 能 以 不 同 的 形式 来 显示 收 到 和 发 出 的 消息 。 
































13.12 总结 
好 了 ， 把 它们 全 部 放 在 一 起 ， 就 是 一 个 完整 的 聊天 应 用 了 如 图 13-13 所 示 )! 








(D http://momentjs.com/ 
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© © @ / [5 anguiar 2 - Chat with RxJS x \\ 
€ > CŒ Docahost8080 Ww 








ng-book 2 


Echo Bot + 
ll echo whatever you send me 
Reverse Bot 

rdi ll reverse whatever you send me 


Waiting Bot 
edi wait however many seconds you send to me before responding. Try sending '3' 


Lady Capulet 
So shall you feel the loss, but not the friend which you weep for. 


Wi Chat - Echo Bot 


I'll echo whatever you n 
send me 





DM | 








图 13-13 ”完成 后 的 聊天 应 用 


查看 文件 code/redux/angular2-redux-chat/app/ts/ChatExampleData.ts, 你 会 发 现 我 们 已 经 写 好 了 
少量 可 以 跟 你 聊天 的 机 器 人 。 检 出 这 些 代 码 并 试 着 写 几 个 自己 的 机 器 人 吧 ! 





高 级 组 件 








在 本 书 中 ,我 们 已 经 学 习 了 如 何 使 用 Angular 的 内 置 指 令 以 及 如 何 创建 组 件 。 本 章 将 深入 探 
讨 用 于 开发 组 件 的 高 级 Angular 特 性 。 
我 们 将 在 本 章 中 学 习 以 下 内 容 : 
O 组 件 样式 封装 
口 修改 宿主 DOM 元 素 
口 使 用 内 容 投 影 修 改 模板 
a 访问 邻近 的 指令 
口 使 用 生命 周期 钧 子 
口 变更 检测 








14.4 样式 


Angular 提 供 了 一 套用 来 指定 “组 件 级 ”样式 的 机 制 。 尽管 CSS 的 意思 是 层 登 样式 表 ( cascading 
style sheet )， 但 有 时 候 我 们 并 不 想 要 “ 层 苹 ”效果 。 我 们 可 能 只 想 为 某 个 特定 的 组 件 提 供 样 式 ， 
而 不 要 影响 到 页 面 的 其 他 部 分 。 


Angular 为 组 件 提 供 了 两 个 属性 来 定义 CSS 类 。 


为 了 定义 组 件 样式 , 我 们 使 用 视图 属性 styles 来 定义 内 联 样式 或 者 借助 styleurls 属 性 来 使 
用 外 部 CSS 文 件 ， 还 可 以 在 组 件 的 装饰 需 中 直接 定义 这 些 属 性 。 


我 们 来 创建 一 个 使 用 内 联 样式 的 组 件 。 


code/advanced components/app/ts/styling/styling.ts 























@Component({ 
selector: 'inline-style', 
styles: [^ 
.highlight { 
border: 2px solid red; 
background-color: yellow; 
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text-align: center; 
margin-bottom: 20px; 

} 

ae 

template: ^ 

«h4 class="ui horizontal divider header"> 
Inline style example 

«/h4» 


«div class="highlight"> 
This uses component «code»styles«/code» 
property 

«/div» 


}) 
class InlineStyle { 


} 
在 这 个 示例 中 ,我 们 在 styles 数 组 参数 中 声明 了 CSS 类 .highlight , 它 定 义 了 我 们 要 用 的 样式 。 
然后 在 模板 中 使 用 cdiv class="highlight"> 引 用 这 个 类 。 

后 的 结果 与 我 们 预期 的 一 样 : 一 个 红色 边框 、 黄 色 背 景 的 div ( 如 图 14-1 所 示 )。 


























al 


Inline style example 
图 14-1 使 用 styles 属 性 的 组 件 示 例 


另 一 种 声明 CSS 类 的 方法 是 使 用 styleurls 属 性 。 它 可 以 让 我 们 从 外 部 文件 中 定义 CSS 并 在 
组 件 中 直接 引用 它们 。 
在 用 这 种 方式 创建 另 一 个 组 件 之 前 ， 创 建 一 个 名 为 extemalcss 的 文件 ， 它 包含 下 面 这 些 类 。 

















code/advanced_components/app/ts/styling/external.css 


.highlight { 
border: 2px dotted red; 
text-align: center; 
margin-bottom: 20px; 

} 


然后 就 可 以 在 组 件 代 码 中 引用 它 。 


code/advanced components/app/ts/styling/styling.ts 


@Component ( { 
selector: 'external-style', 
styleUrls: [externalCSSUrl], 
template: ^ 
«h4 class="ui horizontal divider header"» 
External style example 
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«/h4» 


«div class-"highlight"» 
This uses component «code»styleUrls«/code» 
property 

«/div» 


}) 
class ExternalStyle { 


} 


加 载 页 面 时 ， 就 可 以 看 见 有 虚线 边框 的 giv( 如 图 14-2 所 示 )。 


External style example 


This uses component styleUrls propert 











图 14-2 ”使 用 styleurls 属 性 的 组 件 示 例 








14.1.1 视图 (样式 ) 封装 
这 个 例子 中 有 意思 的 地 方 是 ， 
但 它们 并 没有 相互 干扰 。 


这 是 因为 Angular 默 认 将 组 件 样式 封装 
可 以 注意 到 Angular 把 我 们 定义 的 样式 注入 到 了 一 























管 其 属性 是 不 同 





这 两 个 组 件 都 定义 了 名 为 highlight 的 类 ; 尽 
的 ， 





在 组 件 的 上 下 文中 。 如果 检 查 页 面 并 展开 <head> 标 签 ， 
个 cstyle> 标 签 之 中 ， 如 图 14-3 所 示 。 

















@ — 9 | Banguiar2-ngstyiedemo x \ Felipe 
c localhost:8080 jd — 
a ngbook2 Angular 2 component styling demo 
Inline style example 
This uses component styles property 
External style example 
RO Elements Console Sources Network Timeline Profiles Resources Security Audits 1059€ 
> #shadow-root (open) | 
v <head> d Styles Computed » 


«highlight [_ngcontent-hve-2] { 
border: 2px solid red; 
background-color: yellow; 
text-align: center; 
margin-bottom: 2@px; 


Y 
</style> 
> <style>..</style> 


| html head 








图 14-3 ”注入 后 的 样式 


<title>Angular 2 - ngStyle demo</title> Fite + 
«link rel-"icon" type-"image/png" href-"resources/images/favicon-32x32.png" sizes- | er t9 
"32x32" —— 3 nace element.style ( 
<link rel-"icon" href-"resources/images/favicon.ico"» } 
<!-- Libraries --> 
<script src-"node modules/es6-shim/es6-shim. js"></script> *, after, semantic.min.css:ll 
<script src-"node modules/angular2/bundles/angular2-polyfills.js'--/script- :before { C 
<script src="node_modules/systemjs/dist/system.src.js"></script> box-sizing: inherit; 
<script src="node modules/rxjs/bundles/Rx. js'"></script> 
<script src=" nade padales angular? /bandles/angularsaev. j^ ></script> style { user agent stylesheet 
<!-- Stylesheet --> display: none; 
<link rel="stylesheet" type="text/css" href= rces/vendor/semantic.min.css"» 
<link rel="stylesheet" type="text/css" href=" E css"> A 

yvestyle> Inherited from html 


html { itic.min.css:11 
font-size: 14px; 


html { semantic.min.css:11 
box-sizing: border-box; 
font-family: sans-serif; 


-webkit-text-size-adjusti 
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你 还 会 注意 到 ， 到 这 


.highlight[N ngcontent-hve-2] { 


border: 2px solid red; 
background-color: yellow; 
text-align: center; 


margin-bottom: 20px; } 





如 果 查 看 cdivy 的 泻 染 结果 , 会 发 现 它 也 添加 了 一 个 _ng-content-hve-2 


LLLI 





文 个 CSS 类 使 用 了 _ngcontent-hve-2 属 性 来 限定 其 作用 域 .: 





属性 , 如 图 14-4 所 示 。 


Felipe 








ngbook2 Angular 2 component styling demo 


Inline style example 





This uses component styles property 











External style example 


This uses component styleUr1s property 





Network Timeline Profiles Resources Security 


Sources 


Elements Console 
><div class-"ui menu">..</div> 
v<div class-"ui main text container'> 
v «style-sample-app- 
v<inline-style nghost-hve-2- 
ngcontent-hve-2-» 


v<h4 class="ui horizontal divider header" | 
::before 


Inline style example 


This uses component 
«code _ngcontent-hve-2>styles</code> 


property 


</div> 
</inline-style> 
> <external-style _nghost-hve-3>..</external-style> 
«/style-sample-app- 
<!-- Our app loads here 一 > 
</div> 
body div.ui.main.text.container 













inline-style IETWETETTETS 






html style-sample-app 





图 14-4 注入 后 的 样式 : 











Audits SE 
Styles Computed » 
+ 5 © 


Filter 


element.style { 
} 
<style>..</style> 
«highlight [_ngcontent-hve-2] { 
border: 2px solid W red; 
background-color: 
yellow; 
text-align: center; 
margin-bottom: 20px; 
Y 
div { 
padding: 3px; 
margin: > 2px; 


styles.css:5 


x, :after, semantic.min.css:11 
:before { 
box-sizing: inherit; 


div { 








user agent stylesheet 


<div> Wie aez sR 
引用 外 部 样式 文件 时 的 效果 也 是 一 样 的 ， 如 图 14-$ 所 示 。 





e. us) BB Angular 2 - ngStyle demo x 





> Œ [À localhost:8080 








S ne-book2 Angular 2 component styling demo 


Inline style example 





This uses component styles property 








External style example 





This uses component styleUr1s property 





RO Elements Console Sources Network Timeline Profiles Resources Security Audits i x 


<script Srt="Tidde_mogu Les/angu tar¿/punateszangu targ. gev, Js“></script> 
Stylesheet --> Styles Computed » 


"stylesheet" type="text/css" href-"resources/vendor/semantic.min.css'- 
"stylesheet" type="text/css" href="styles.css"> Filter +4 分 


> <style>..</style> element.style { 
+ 


*, :after, semantic.min.css:11 




















.highlight[ ngcontent-hve-3] { 
border: 2px dotted red; 

















text-align: center; ibefore { 
margin-bottom: 20px; box-sizing: inherit; 
+ 
</style> 
</head> style { user agent stylesheet 


display: none; 


v <body> 
<!-- Configure System.js, our module loader 一 > 
> <script>..</script> Inherited from htmt 
«1— Menu Bar --> html { senantic.min.css:11 


ui menu">..</div> font-size: 14px; 
ui main text container" 
v «style-sample-app- 
v «inline-style _nghost-hve-2> 
v<h4 class-"ui horizontal divider header"  ngcontent-hve-2- 
irbefore 





html { semantic.min.css:11 
box-sizing: border-box; 
font-family: sans-serif; 


-as text— usti 

















| html head 


图 14-5 ”外 部 样式 
«div» 的 泻 染 结果 如 图 14-6 所 示 。 


OR Proiz- mosean x Sl 
— — Œ [Ù localhost:8080 











S ngbook2 Angular 2 component styling demo 


Inline style example 








| This uses component styles property 





External style example 


This uses component styleUrls property 








œ O | Elements Console Sources Network Timeline Profiles Resources Security Audits B 5 
<code _ngcontent-hve-2>styles</code> Styles |Computed » 
, Property Filter +, 3% @ 
</div> element.style { 
</inline-style> } 


w«external-style _nghost-hve-3> 


i horizontal divider header" <style>..</style> 


«highlight [_ngcontent-hve-3] { 
border:»2px dotted Wired; 
text-align: center; 
margin-bottom: 20px; 









ngcontent-hve-: 





This uses component " 
«code _ngcontent-hve-3>styleUrls</code> 





property |div 4 styles.css:5 
n padding: > 3px; 
</div> margin: > 2px; 
</external-style> H 


«/style-sample-app» *, :after, ntic.min. il 
«!—- Our app loads here 一 > sbefore E 
</div> a "a 
<!-- Code injected by live-server 一 > boxseizing: $nheritg 
»«script type="text/javascript">..</script> 
</body> div { user agent stylesheet 


</html> display: block; 
html body  div.ui.main.text.container styl pp  external-style 区 ,| 5 

















图 14-6 “外 部 样式 : «divo 的 泻 染 结果 
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Angular 允 许 我 们 使 用 encapsulation 属 性 来 更 改 这 种 行为 。 
这 个 属性 可 以 取 下 列 值 之 一 ， 它 们 都 定义 在 ViewEncapsulation 枚 举 中 。 


O Emulated (仿真 ): 这 是 默认 选项 ， 它 会 采用 我 们 刚刚 解释 过 的 技术 来 封装 样式 。 
O Native (原生 ): 使 用 这 个 选项 ，Angular 会 采用 Shadow DOM 技 术 ( 下面 会 详细 介绍 )。 
O None (无 ): 使 用 这 个 选项 , Angular 不 会 封装 任何 样式 , 允许 样式 渗透 给 页 面 的 其 他 元 素 。 


























14.1.2 Shadow DOM 封装 





你 可 能 会 问 : Shadow DOM 有 什么 用 呢 ? DOM， 组 件 会 生成 一 棵 独一无二 
的 DOM 树 ， 而 这 棵 DOM 树 对 于 页 面 中 的 其 他 元 素 是 不 可 见 的 。 这 样 ， 在 这 个 元 素 中 定义 的 样式 
对 页 面 的 其 余部 分 来 说 就 像 不 存在 一 样 。 





要 深入 了 解 Shadow DOM， 请 查阅 Eric Bidelman4$ 5j 45 48 Ahttp:/Avww.htmlSrocks. 
com/en/tutorials/webcomponents/shadowdom/。 


我 们 来 创建 男 一 个 使 用 Native 封 装 ( Shadow DOM ) 的 组 件 ， 理 解 它 是 如 何 工作 的 。 


code/advanced components/app/ts/styling/styling.ts 


@Component ( { 

selector: ^native-encapsulation', 

styles: [^ 

.highlight { 
text-align: center; 
border: 2px solid black; 
border-radius: 3px; 
margin-botton: 20px; 

rl 

template: ^ 

«h4 class="ui horizontal divider header"» 
Native encapsulation example 

«/h4» 


«div class="highlight"> 
This component uses «code»ViewEncapsulation.Native«/code» 
«/div» 


encapsulation: ViewEncapsulation.Native 


}) 


class NativeEncapsulation { 


} 
在 这 个 例子 中 ， 如 果 查 看 源 代码 ， 会 看 到 如 图 14-7 所 示 的 结果 。 











@ — | Banguiar2-ngstyledemo x Felipe. 


© |} localhost:8080 By 


ngbook2 Angular 2 component styling demo 


Inline style example 








This uses component styles property 








External style example 
This uses component styleUr1s property 
Native encapsulation example 


This component uses ViewEncapsulation.Native 


民 O | Elements Console Sources Network Timeline Profiles Resources Security Audits a 





»<external-style _nghost-jev-3>..</external-style> Styles | Computed » 
v#shadow-root (open) Filtei + * 
v sstyle- n 
„highlight { element. style { 
text-align: center; } 


border: 2px solid black; iatt r 
border-radius: 3px; *, :after, semantic.min.css:ll 
:before { 


</style> box-sizing: inherit; 
<h4 class="ui horizontal divider header > 
eee encapsulation example Inherited from div.ui.main.te... 
</h4> 
MS uides om meri 
font-family: 
Lato, ‘Helvetica 
Neue' ,Arial,Helvetica,. 


This component uses " 
<code>ViewEncapsulation.Native</code> 
</div> 
>» <style>..</style> 
> <style>..</style> 
</native-encapsulation> 


RAM 


html! body div.ui.main.text.container style-sample-app BUE ZEE TERT 


seri 





line-height: 1.5; 
font-size: 1.14285714rem; 















14-7 Native 封装 








#shadow-root 元 素 里 面 的 一 切 都 被 封装 起 来 了 ， 并 且 和 页 面 的 其 他 部 分 是 完全 隔离 的 。 


14.1.3 不 使 用 封装 


最 后 ， 如 果 我 们 创建 一 个 组 件 并 指定 viewEncapsulation.None， 那 就 不 会 进行 任何 的 样式 
封装 。 


code/advanced_components/app/ts/styling/styling.ts 


@Component ( f 

selector: ^no-encapsulation', 

styles: [^ 

.highlight { 
border: 2px dashed red; 
text-align: center; 
margin-bottom: 20px; 

j 

dtp 

template: 

<h4 class="ui horizontal divider header"> 
No encapsulation example 

«/h4» 





«div class-"highlight"» 
This component uses «code»ViewEncapsulation.None«/code» 
«/div» 





encapsulation: ViewEncapsulation.None 


}) 


class NoEncapsulation { 


} 
检查 元 素 时 ， 会 看 到 如 图 14-8 所 示 的 结果 。 





OB O Prous 2 orye oer x VER 


c localhost:8080 
= 


Inline style example 








This uses component styles property 








External style example 





| 
R D Elements Console Sources Network Timeline Profiles Resources Security Audits x 
» <INTINe=Style _ngnost-rky-z>..</1n Line=sty Le> 
><external-style _nghost-rky-3>..</external-style> Styles Computed » 
b <native-encapsulation>..</native-encapsulation> : | 
Filter +, 3 @ || 
Y<h4 plese horizontal divider header" element.style ( 
iibefore } | 
No encapsulation example *, :after, semantic.min.css:11 | 
" :before { 
rafter box-sizing: inherit; 
</h4> 
v «div. class="highlight"> Inherited from div.ui.main.te... 
This component uses " en omni ser que sill 
<code>ViewEncapsulation.None</code> sul. text. container 
«/div» font- family: 
</no-encapsulation> Lato, ‘Helvetica 
</style-sample-app> Neue’ ,Arial,Helvetica,.. 
fi 
<!-- Our app loads here —> jt 
700px! important; 
line-height: 1.5 





</div> 
dj- Code injected by Liverserver ， ee 
Spee NE Se Apes = font-size: 1. 14285714ren; 
html. “body * div. ui.main.text. container styles aie app ESS n 


图 14-8 不 进行 封装 


可 以 看 到 HTML 中 没有 注入 任何 东西 。 在 页 头 中 可 以 找到 注入 的 <styley> 标 签 ， 
styles 人 参数 中 定义 的 完全 一 样 : 


.highlight { 
border: 2px dashed red; 
text-align: center; 
margin-bottom: 20px; 


它 跟 我 们 在 





} 
使 用 viewEncapsulation.None 的 缺点 是 ， 因 为 没有 进行 任何 封装 ， 所 以 它 的 样式 会 影响 到 


其 他 组 件 。 在 图 13-8 中 可 以 看 到 ， 使 用 viewEncapsulation.Native 的 组 件 已 经 受到 了 这 个 新 组 
件 的 样式 的 影响 。 但 有 时 候 这 可 能 恰恰 是 你 想 要 的 。 
你 可 以 注释 掉 StyleSampleApp 模 板 中 的 cno-encapsulation> </no-encapsulation> 
码 来 看 一 看 区 别 。 


这 行 代 
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14.2 创建 popup 指令 : 引用 并 修改 宿主 元 素 
宿主 元 素 是 指令 或 组 件 被 绑 定 到 的 元 素 。 有 时 组 件 可 能 需要 往 它 的 宿主 元 素 上 附加 一 些 标记 


























在 这 个 示例 中 ， 我 们 会 创建 一 个 popup 指 令 。 它 会 往 宿主 元 素 上 附加 行为 ， 在 宿主 元 素 被 点 
击 时 显示 一 条 信息 。 





Q, 组 件 与 指令 : 两 者 的 区 别 是 什么 ? 

组 件 和 指令 有 着 密 不 可 分 的 关系 ， 但 它们 略 有 不 同 。 
你 或 许 曾 听 说 过 “组 件 就 是 有 视图 的 指令 ”。 其 实 这 并 不 完全 正确 。 组 件 自 带 的 
功能 使 它 很 容易 添加 视图 ， 但 指令 同样 也 可 以 有 视图 。 事 实 上 ， 组 件 是 用 指令 
来 实现 的 。 
一 个 很 好 的 例子 就 是 ngIf， 它 根据 条 件 来 泻 染 视图 。 
但 我 们 可 以 使 用 指令 在 没有 模板 的 情况 下 给 元 素 附 加 行为 。 
你 可 以 这 样 认为 : 组 件 就 是 指令 ,但 组 件 必须 有 视图 。 指 令 可 以 有 视图 ， 也 可 
以 没有 。 
如 果 你 选择 在 指令 中 泻 染 视 图 (模板 ) 的 话 ， 可 以 对 该 模板 的 呈现 方式 进行 更 
多 的 控制 。 在 本 章 的 后 面 我 们 会 讨论 如 何 对 模板 进行 控制 。 


14.2.1 popup 指令 的 结构 
现在 来 编写 我 们 的 首 个 指令 。 我们 希望 在 点 击 一 个 带 有 popup 属 性 的 DOM 元 素 时 , 该 指令 能 
显示 出 一 个 提示 消息 。 这 个 消息 是 通过 该 元 素 的 message 属 性 来 指定 的 。 
我 们 希望 它 看 起 来 如 下 所 示 : 
«element popup message="Some message"></element> 
为 了 让 这 个 组 件 正常 工作 ， 我 们 还 要 做 一 些 事 


口 接收 来 自 宿主 元 素 的 message 属 性 ; 
Q 当 宿 主 元 素 被 点 击 时 得 到 通知 。 


我 们 这 就 开始 编写 它 。 

















pum 





[ 








ej 




















code/advanced_components/app/ts/host/steps/host_01.ts 


@Directive({ 
selector: '[popup]' 
}) 
class Popup { 
constructor() { 
console.log('Directive bound'); 
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} 
} 


我 们 使 用 Directive 注 解 并 将 selector 参 数 设 置 为 [popup] 。 这 可 以 让 该 指令 绑 定 到 任何 定 
义 了 popup 属 性 的 元 素 。 


现在 来 创建 一 个 应 用 ， 它 包含 一 个 有 popup 属 性 的 元 素 。 


code/advanced_components/app/ts/host/steps/host_01.ts 

















@Component( { 
selector: 'host-sample-app', 
template: ^ 
«div class="ui message" popup» 
«div class-"header"» 
Learning Directives 
«/div» 


«p» 
This should use our Popup diretive 

«/p» 

«/div» 


}) 
export class HostSampleApp1 { 


} 


运行 这 个 应 用 时 ， 我 们 期 望 Directive bound 消 息 会 被 打印 到 控制 台中 ， 这 表示 我 们 已 经 成 
功 绑 定 了 模板 中 的 第 一 个 cdiv、( 如 图 14-9 所 示 )。 











@ — © / Banguiar2-Host element x Felipe 
| © |} localhost:8080 ag = 
| % ng-book2 Angular 2 component styling demo 
Learning Directives 
This should use our Popup diretive 
RO Elements Console Sources Network Timeline Profiles Resources >> A ih 
© Ww <top frame> v U Preserve log 
Live reload enabled. index) :79 
> XHR finished loading: GET "http://localhost:8080/app. js". system. src. js:1049 
Directive bound app.ts:9 
Angular 2 is running in the development mode. Call enableProdMode() to angular2.dev.js:354 
enable the production mode. 


图 14-9” 绑 定 到 宿主 元 素 


14.2 €]3£ popup 78 
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14.2.2 使 用 ElementRef 








如 果 我 们 想 对 指令 所 绑 定 的 宿主 元 素 进 行 更 多 控制 ， 可 以 使 用 内 置 的 ElementRef 类 。 
个 类 保存 着 指定 Angular 元 素 的 相关 信息 ， 使 用 它 的 nativeElement 属 性 可 以 获取 原生 的 





se i 











为 了 看 到 指令 所 绑 定 的 元 素 ,， 我 们 可 以 在 构造 函数 中 接收 ElementRef 并 把 它 打印 到 控制 台中 。 


code/advanced_components/app/ts/host/steps/host_02.ts 


@Directive({ 
selector: '[popup]' 
}) 
class Popup { 
constructor(_elementRef: ElementRef) { 
console. log(_elementRef); 
} 
} 


我 们 还 可 以 往 页 面 中 添加 另 一 个 元 素 , 它 也 使 用 这 
两 个 不 同 的 ElementRef。 





code/advanced_components/app/ts/host/steps/host_02.ts 


@Component ( f 
selector: 'host-sample-app', 
template: ~ 
<div class="ui message" popup> 
<div class="header"> 
Learning Directives 
</div> 


<p> 

This should use our Popup diretive 
</p> 
</div> 


<i class="alarm icon" popup></i> 


}) 
export class HostSampleApp2 { 


] 
现在 ， 当 运行 应 用 时 ， 可 以 看 到 两 个 不 同 的 ElementRet : 

















这 样 就 可 以 看 见 控制 台中 打印 了 




















一 个 是 div .ui .message， 男 一 个 14 


是 i.alarm.icon。 这 表示 该 指令 已 经 成 功 绑 定 了 两 个 不 同 的 和 宿主 元 素 ， 如 图 14-10 所 示 。 
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[ 
O — /Angular2-Hostelement x 


c localhost:8080 


ON ng-book2 Angular 2 component styling demo 


Learning Directives 
This should use our Popup diretive 


a 





© Y  <top frame> 
Y ElementRef_ 
> appElement: AppElement 
internalElement: (...) 
> nativeElement: div.ui.message Ee 
> proto : ElementRef_ 
Y ElementRef 
> appElement: AppElement 
internalElement: (...) 
> nativeElement: i.alarm.icon A 


> proto : ElementRef 
Angular 2 is running in the development mode. Call enableProdMode() to 


v (Preserve log 








114-10 ”两 个 ElementRef 


14.2.3 ” 绑 定 到 host 属性 


我 们 的 下 一 个 目标 是 在 宿主 元 素 被 点 击 时 做 一 些 事 。 





RO Elements Console Sources Network Timeline Profiles Resources 


» 2 


app.ts:9 


angular2.dev.js:354 


我 们 之 前 学 过 ， 在 Angular 中 给 元 素 绑 定 事件 的 方法 是 使 用 (event ) 语 法 。 
为 了 给 宿主 元 素 绑 定 事件 ,我们 必须 做 一 些 类 似 的 事情 ， 不 同 之 处 是 这 次 使 用 指令 的 host 








属性 。host 属 性 允许 指令 改变 其 宿主 元 素 的 属性 和 行为 。 





我 们 还 希望 宿主 元 素 使 用 它 的 message 属 性 来 定义 点 击 时 要 弹出 的 消息 。 





首先 , 在 指令 中 添加 inputs 属 性 。 我 们 导入 Input, 并 使 用 @Input 注 解 来 修饰 这 个 输入 属 





import { Component, Input } from '@angular/core'; 


class Popup { 
GInput() message: String; 


m 





这 段 代 码 表示 我 们 有 一 个 名 为 message 的 属性 ， 并 且 期 望 接收 一 个 与 之 同名 的 输入 。 














接着 ， 我 们 通过 往 ecomponent 注解 上 添加 host 属 ;4 


— 





Felipe 


生来 把 它 绑 定 到 宿主 元 素 上 。 








PE. 
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code/advanced_components/app/ts/host/steps/host_03.ts 
@Directive({ 

selector: '[popup]', 

host: { 

'(eclick)': 'displayMessage()' 

j 
}) 
然后 ， 当 宿主 元 素 被 点 击 时 就 会 调用 指令 的 displayMessage 方 法 ， 它 会 显示 宿主 元 素 定 

义 的 消息 。 

现在 代码 如 下 所 示 。 


code/advanced_components/app/ts/host/steps/host_03.ts 


» 


class Popup { 
GInput()message: String; 


constructor(_elementRef: ElementRef) { 
console. log(_elementRef); 


} 


displayMessage(): void { 
alert(this.message); 
j 
j 


最 后 ， 我 们 需要 修改 应 用 的 模板 ， 为 每 个 元 素 添 加 要 显示 的 消息 。 














code/advanced_components/app/ts/host/steps/host_03.ts 


@Component ( f 
selector: 'host-sample-app', 
template: ~ 
<div class="ui message" popup 
message-"Clicked the message"> 
«div class="header"> 
Learning Directives 
«/div» 


«p» 

This should use our Popup diretive 
</p> 
</div> 


<i class="alarm icon" popup 
message-"Clicked the alarm icon"»«/i» 


}) 
export class HostSampleApp3 { 


} 
注意 ， 这 里 使 用 了 两 次 popup 指 令 并 传人 了 不 同 的 message 属 性 。 这 意味 着 当 我 们 运行 本 应 





LI 
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用 时 ， 点 击 信息 内 容 或 者 图 标 将 会 看 到 不 同 的 弹出 信息 ， 分 别 如 图 14-11 和 图 14-12 所 示 。 


localhost:8080 says: 
w Clicked the alarm icon 











图 14-11 弹出 信息 1 


localhost:8080 says: 
w Clicked the message 











图 14-12 ”弹出 信息 2 


14.2.4 添加 按钮 并 使 用 exportAs 


假设 现在 又 来 了 新 需求 : 通过 点 击 按钮 来 手动 触发 弹出 信息 。 那么 该 如 何在 宿主 元 素 之 外 触 


发 弹出 信息 呢 ? 


为 了 实现 这 个 目标 , 我 们 要 让 指令 在 模板 中 的 任何 地 方 都 能 被 访问 到 。 正 如 我 们 在 之 前 
中 讨论 过 的 ， 可 以 使 用 模板 变量 来 引用 组 件 。 我 们 也 可 以 用 同样 的 方式 来 引用 指令 。 











为 了 可 以 在 模板 中 引用 指令 ,就 要 使 用 exportAt 属 性 。 这 将 允许 宿主 元 素 ( 或 宿主 元 素 的 子 


元 素 ) 使 用 tvar="exportName" 语 法 定义 一 个 模板 变量 来 引用 指令 。 
让 我 们 把 exportAs 属 性 添加 到 指令 中 。 














code/advanced_components/app/ts/host/steps/host_04.ts 


@Directive({ 
selector: '[popup]', 
exportAs: 'popup', 
host: { 
'(click)': 'displayMessage()' 
j 
}) 


class Popup { 
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@Input() message: String; 


constructor(_elementRef: ElementRef) { 
console. log(_elementRef); 


} 


displayMessage(): void { 
alert(this.message); 
} 
} 


现在 我 们 需要 修改 这 两 个 元 素来 导出 模板 变量 。 








code/advanced_components/app/ts/host/steps/host_04.ts 


template: ~ 
«div class="ui message" popup #popup1="popup" 
message-"Clicked the message"> 
«div class-"header"» 
Learning Directives 
«/div» 


«p» 
This should use our Popup diretive 

</p> 

</div> 


«i class-"alarm icon" popup #p2="popup" 
message-"Clicked the alarm icon"»«/i» 


可 以 看 到 ， 我 们 用 模板 变量 #p1 代 表 div .message ， 用 #p2 代 表 icon。 
现在 再 添加 两 个 按钮 ,分别 触发 它们 的 弹出 信息 。 


code/advanced_components/app/ts/host/steps/host_04.ts 


«div style="margin-top: 2@px;"> 
«button (click)="popup1.displayMessage()" class="ui button"» 
Display popup for message element 
</button> 


«button (click)="p2.displayMessage()" class="ui button"> 
Display popup for alarm icon 
</button> 
</div> 


现在 刷新 页 面 并 分 别 点 击 每 个 按钮 ， 每 条 消息 都 会 如 预期 那样 出 现 。 





14.3 ”使 用 内 容 投影 创建 消息 面板 














有 了 时, 我 们 在 创建 组 件 的 时 候 想 要 把 组 件 内 部 的 标记 作为 一 个 参数 传 给 组 件 。 这 种 技术 就 叫 


作 内 容 投影 (content projection )。 它 能 让 我 们 指定 一 些 会 扩散 到 更 大 模板 之 中 的 标记 。 
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o 在 AngularJS 中 ， 这 种 技术 被 称 为 透 传 (transclusion )。 





我 们 来 创建 一 个 指令 ， 它 将 泻 染 一 个 比较 好 看 的 消息 ， 如 图 14-13 所 示 。 








Learning Directives 


This should use our Popup diretive 





图 14-13 popupi Sieh, 


我 们 的 最 终 目 标 是 写 如 下 标记 。 


<div message header="My Message"> 
This is the content of the message 
</div> 


它 将 被 演 染 成 更 复杂 的 HTML 。 


<div class="ui message"> 
«div class="header"> 
My Message 
</div> 





EZ 




















<p> 
This is the content of the message 

</p> 

</div> 


这 里 面临 两 个 挑战 : 我 们 要 给 宿主 元 素 添 加 两 个 CSS 类 (ui 和 message )， 还 要 把 qiv 中 的 内 
容 添 加 到 标记 中 的 一 个 指定 位 置 。 





14.3.1 改变 host 属性 的 CSS 类 


和 之 前 添加 事件 一 样 , 为 了 给 宿主 元 素 添 加 属性 , 要 使 用 nost 属 性 ; 但 是 在 这 里 我 们 定义 了 
属性 的 名 称 和 值 ， 而 不 是 使 用 (event ) 的 写法 。 在 这 个 例子 中 是 这 样 的 。 


host: { 'class': 'ui message' } 


它 会 修改 宿主 元 素 ， 把 这 些 类 添加 到 class 属 性 中 。 



































14.3.2 使 用 ng-content 


下 一 个 挑战 是 将 宿主 元 素 节点 原来 的 子 节 点 包含 进 视图 中 的 指定 部 分 。 要 做 到 这 一 点 , 我 们 
使 用 ng-content 指 令 。 
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因为 这 个 指令 需要 模板 ， 所 以 在 这 里 改 用 组 件 ， 并 编写 如 下 代码 。 


code/advanced components/app/ts/content-projection/content-projection.ts 


@Component( { 
selector: '[message]', 
host: { 
'class': 'ui message' 
J; 
template: ` 


<div class="header "> 
{{ header }} 
</div> 
<p> 
<ng-content></ng-content> 
</p> 


}) 
export class Message { 
@Input() header: string; 


ngOnInit(): void { 
console.log('header', this.header); 
j 
j 


下 面 是 一 些 要 点 : 
O 用 einputs 注 解 表明 我 们 希望 接收 宿主 元 素 上 设置 的 neader 属 性 ; 
O 用 组 件 的 host 属 性 把 宿主 元 素 的 class 属 性 设置 为 ui message; 
O 使 用 cng-content> /ng-content> 将 宿主 元 素 的 子 节 点 投影 到 模板 中 的 指定 位 置 。 
当 我 们 在 浏览 器 中 打开 应 用 并 检查 有 message 属 性 的 div 时 ， 会 看 到 它 正 如 我 们 所 预期 的 那 
样 工作 ， 如 图 14-14 所 示 。 
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@ — € / Wanguar2-Hostelemnt x —— Felipe. 


e localhost:8080 W 


o ngbook2 Angular 2 Advanced Components 


My Message 
This is the content of the message 


ROD Elements Console Sources Network Timeline Profiles Resources » 2 i x 


E v <div class= ui message“ header="My Message“ message 
v <div> 
<div class="header"> 
My Message 
</div> 
This is the content of the message 
</p> 
</div> 
</div> 
</host-sample-app> 
«!-- Our app loads here --» 
</div> 
html body  div.ui.main.text.container host-sample-app [ERA iMate toy 
Styles Event Listeners DOM Breakpoints Properties 
| Filter +2 @ 
| element.style { 
条 


| 
| .ui.message: last-child { semantic.min.css:11 
| margin-bottom: @; 





ion 








bo 
| padding 16 





图 14-14 ”投影 进来 的 内 容 





14.4 查询 相 邻 的 指令 : 编写 标签 页 

如 果 你 能 创建 一 个 完全 封装 了 自身 行为 的 组 件 ， 那 当然 很 棒 。 

然而 , 随 着 组 件 功 能 的 不 断 扩 展 , 将 组 件 切 割 成 一 些 更 小 的 组 件 再 将 它们 组 合 在 一 起 就 变 得 

意义 了 。 

一 个 拥有 多 个 标签 页 的 标签 面板 是 组 件 协同 工作 的 好 例子 。 标签 面 板 或 者 标签 集合 是 由 多 个 
标签 页 组 合 而 成 的 。 在 这 个 场景 中 ， 我 们 有 一 个 父 组 件 〈 标 签 集 合 ) 和 多 个 子 组 件 ( 标签 页 )。 
单独 看 标签 面板 或 标签 页 没有 意义 , 但 把 所 有 逻辑 都 放 在 同一 个 组 件 中 又 太 笨 重 了 。 因 此 , 我 们 
将 在 这 个 示例 中 讲解 如 何 让 这 些 单独 的 组 件 协同 工作 。 

下 面 来 编写 这 些 组 件 ， 最 终 目 标 是 这 样 用 。 


«tabset» 
«tab title-"Tab 1"»Tab 1«/tab» 
«tab title-"Tab 2"»Tab 2«/tab» 

















«/tabset» 


我 们 将 使 用 Semantic UI 的 Tab 组 件 ? 来 泻 染 标 签 页 。 








(D http://semantic-ui.com/modules/tab.html#/examples 
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14.4.4 Tab 组 件 
先 来 编写 Tab 组 件 。 


code/advanced_components/app/ts/tabs/tabs.ts 

















@Component ( f 
selector: 'tab' 
template: ^ 
«div class="ui bottom attached tab segment" 

[class.active]-"active"» 


, 


«ng-content»«/ng-content» 
«/div» 


}) 

class Tab { 
@Input() title: string; 
active: boolean = false; 
name: string; 


} 

这 里 没有 什么 新 概念 。 我 们 声明 了 一 个 组 件 , 它 的 选择 需 是 tab 并 且 接 收 一 个 输入 属性 title。 

然后 泻 染 一 个 cdiv> 标 签 ， 并 使 用 前 一 节 中 学 过 的 内 容 投 影 概 念 把 ctab> 指 令 的 行内 内 容 构 
入 这 个 div。 


接 下 来 声明 三 个 组 件 属 性 : title 、active 和 name。 需 要 注意 的 是 ， 我 们 把 title 属 性 添加 
到 了 @Input('title' ) 注 解 中 。 这 个 注解 告诉 Angular 自 动 把 输入 属性 title 和 组 件 属性 title 进 
行 绑 定 。 


















































Loe 











Hl 





14.4.2 Tabset 组 件 
现在 让 我 们 转向 Tabset 组 件 ， 用 它 来 包 庄 住 标签 页 。 


code/advanced_components/app/ts/tabs/tabs.ts 








@Component ( f 

selector: 'tabset', 

template: ~ 

«div class="ui top attached tabular menu"» 

«a xngFor-"let tab of tabs" 

class="item" 
[class.active]="tab.active" 
(click)="setActive(tab)"> 


{{ tab.title }} 


</a> 
</div> 
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<ng-content></ng-content> 


}) 
class Tabset implements AfterContentInit { 
@ContentChildren(Tab) tabs: QueryList«Tab»; 


constructor() { 


} 


ngAfterContentInit() f 
this.tabs.toArray()[0].active - true; 


} 


setActive(tab: Tab) { 
this.tabs.toArray().forEach((t) => t.active = false); 
tab.active = true; 
} 
} 


我 们 来 分 别 讲解 它 的 实现 ， 这 样 可 以 更 好 地 学 习 它 引入 的 新 概念 。 
1. Tabset 的 @Component 注 解 
@Component 部 分 没有 什么 新 概念 。 我 们 使 用 ctabset > 作为 选择 器 。 


模板 本 身 使 用 ngFor 来 遍历 tabs 属 性 。 如 果 一 个 tab 的 active 标 记 是 true ， 那 么 它 就 会 在 用 
来 演 染 tab 的 ca> 元 素 上 添加 CSS 类 active。 


我 们 还 指定 了 ， 在 初始 化 div 之 后 、 在 ng-content 所 在 位 置 演 染 所 有 标签 。 























2. Tabset 类 

现在 让 我 们 把 注意 力 转 向 Tabset 类 。 这 里 的 第 一 个 新 概念 就 是 Tabset 类 实现 了 
AfterContentInit。 这 个 生命 周 期 钓 子 告诉 Angular， 一 旦 子 组 件 的 内 容 初 始 化 ， 就 调用 类 的 方 
iE ( ngAfterContentInit ) 



































3. Tabset AJContentChildren#lQueryList 

接 下 来 ,我 们 声明 tabs 属 性 ， 用 它 来 保存 在 tabset 中 声明 的 每 个 Tab 组 件 。 注 意 ， 这 里 声明 
的 不 是 一 个 rab 的 数组， 而 是 使 用 QueryList 类 并 传人 泛 型 Tab。 这 是 为 什么 呢 ? 

QueryList 是 Angular 提 供 的 类 。 当 我 们 同时 使 用 QueryList 和 ContentChildren 时 ，Angular 
就 会 将 匹配 查询 的 组 件 填充 到 QueryList ， 然 后 在 应 用 状态 变更 时 保持 这 些 填充 项 的 更 新 。 

然而 ，QueryList 需 要 ContentChildren 来 进行 填充 。 我 们 这 就 来 看 一 看 。 

在 tab 实 例 对 象 上 ， 我 们 添加 了 econtentchildren(Tab) 注 解 。 这 个 注解 告诉 Angular 要 在 
tabs 人 参数 中 注入 所 有 Tab 类 型 的 直接 子 指令 。 然 后 再 将 其 赋值 给 组 件 的 tabs 属 性 。 有 了 tabs 属性 ， 
我 们 就 可 以 获得 并 使 用 所 有 的 子 Tab 组 件 了 。 
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4. 初始 化 Tabset 

当 这 个 组 件 初 始 化 之 后 ， 我 们 希望 它 的 第 一 个 标签 页 是 激活 的 。 为 了 做 到 这 点 ， 要 使 用 
ngAfterContentInit PK t ( AfterContentInit £j XJ f XAFS )。 注 意 这 里 使 用 
this.tabs.toArray( ) 将 Angular 的 QueryList 强 制 转换 为 原生 的 TypeScript 数 组 。 

5. Tabset 的 setActive 方 法 

最 后 ， 我 们 定义 了 setActive 方 法 。 当 点 击 模板 中 的 标签 页 时 就 会 调用 这 个 方法 ,例如 
(click)="setActive(tab)"。 这 个 函数 会 遍历 所 有 标签 页 ， 将 它们 的 active 属 性 设置 为 false。 
然后 把 我 们 点 击 的 标签 页 设置 为 激活 页 。 



































14.4.3 ”使 用 Tabset 
下 一 个 任务 是 开发 一 个 应 用 组 件 ， 它 将 使 用 我 们 创建 好 的 这 两 个 组 件 。 我 们 可 以 这 样 做 。 


code/advanced_components/app/ts/tabs/tabs.ts 








@Component ( f 
selector: 'tabs-sample-app', 
template: ^ 
<tabset> 
<tab title="First tab"> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Quibusdam magni quia ut harum facilis, ullam deleniti porro 
dignissimos quasi at molestiae sapiente natus, neque voluptatum 
ad consequuntur cupiditate nemo sunt. 
</tab> 
«tab «ngFor-"let tab of tabs" [title]-"tab.title"» 
{{ tab.content }} 
</tab> 
«/tabset» 


}) 
export class TabsSampleApp { 
tabs: any; 


constructor() { 

this.tabs = [ 
{ title: 'About', content: 'This is the About tab' }, 
{ title: 'Blog', content: 'This is our blog' }, 

{ title: 'Contact us', content: 'Contact us here' }, 
]; 
} 

} 


我 们 使 用 tabs-sample-app 作 为 组 件 的 选择 器 并 且 使 用 了 组 件 Tabset 和 Tab。 

我 们 在 模板 中 创建 了 一 个 tabset 组 件 并 添加 了 一 个 静态 的 tab 组 件 ( 第 一 页 ), 然后 往 组 件 控 
制 妮 类 中 的 tabs 属 性 中 又 添加 了 几 个 tab 组 件 ， 曾 明了 动态 演 染 tab 组 件 的 方法 。 完 成 后 的 应 用 
如 图 14-15 所 示 。 
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© C 0 /Anouar2-ParentandCh x | | Felipe 


© [D localhost:8080 安 | 三 | 


S ng-book2 Angular 2 Advanced Components 


First tab About Blog Contact us 


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam magni quia ut harum facilis, 
ullam deleniti porro dignissimos quasi at molestiae sapiente natus, neque voluptatum ad 
consequuntur cupiditate nemo sunt. 



































图 14-15 ”使 用 Tabset 的 应 


uu 





14.5 生命 周期 钧 子 


Angular 提 供 了 一 些 生 命 周 期 钩子 。 在 指令 生命 周期 的 每 个 阶段 之 前 或 之 后 ， 它 们 允许 你 添 
加 并 执行 一 些 代码 。 
Angular 提 供 的 生命 周期 钩子 如 下 : 
Q OnInit 
口 OnDestroy 
Q DoCheck 
D OnChanges 
Q AfterContentInit 
Q AfterContentChecked 
Q AfterViewInit 
Q AfterViewChecked 


EE FEY HT ES A AES 

为 了 得 到 这 些 事件 的 通知 ， 你 需要 : 

(1) 声明 你 的 指令 类 实现 接口 ; 

(2) 声明 钩子 对 应 的 ng 方法 ( 例如 ，ngonInit )。 


每 个 方法 名 都 以 ng 开头 ， 再 加 上 钩子 的 名 字 。 比 如 ，onIn 让 要 声明 ngonIn 让 方法 ，After- 
ContentInit 要 声明 ngAfterContentInit 方 法 ， 以 此 类 推 。 
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当 Angular 知 道 组 件 实现 了 这 些 函 数 后 ， 就 会 在 适当 的 时 机 调用 它们 。 
下 面 分 别 看 看 每 个 钓 子 的 用 法 以 及 使 用 场景 。 











实际 上 ， 让 这 个 类 实现 (implement ) 该 接口 并 不 是 必需 的 ， 也 可 以 只 创建 此 
钩子 要 求 的 方法 。 不 过 实现 该 接口 是 一 项 最 佳 实践 "， 它 能 在 强 类 型 和 编辑 器 等 
方面 给 你 带 来 好 处 。 


14.5.1 OnInit 和 OnDestroy 


在 指令 的 属性 初始 化 完成 之 后 、 子 指令 的 属性 开始 初始 化 之 前 ，Angular 会 调用 onIn 让 钩子 。 


同样 ， 在 指令 的 实例 销毁 之 前 ，Angular 调 用 OnDestroy 钧 子 。 它 最 典型 的 应 用 场景 是 ， 当 指 
令 销 毁 、 要 做 一 些 清 理工 作 时 。 


为 了 说 明 这 些 ， 我 们 来 编写 一 个 同时 实现 了 onInit 和 OnDestroy 的 组 件 。 


code/advanced_components/app/ts/lifecycle-hooks/lifecycle_01.ts 





























@Component ( f 
selector: 'on-init', 
template: ^ 
«div class="ui label"» 
«i class="cubes icon"»«/i» Init/Destroy 
«/div» 
}) 
class OnInitCmp implements OnInit, OnDestroy { 
ngOnInit(): void { 
console.log('On init'); 


} 


ngOnDestroy(): void { 
console.log('On destroy'); 
} 
} 


在 这 个 组 件 中 ， 当 钩子 被 调用 时 ， 我 们 只 是 往 控制 台中 打印 字符 串 on initfllon destroy. 


要 测试 这 些 钩 子 , 我 们 就 要 在 应 用 组 件 中 使 用 这 些 组 件 , 并 用 ngIf 来 根据 布尔 值 决 定 是 否 显 
示 我 们 的 组 件 。 然 后 添加 一 个 按钮 让 我 们 切换 这 个 布尔 型 标志 : 当 标 记 变 为 假 时 , 组件 会 从 页 面 
中 移 除 ，OnDestroy 就 会 被 调用 ; 当 标 记 变 为 真 时 ，onInit 钧 子 会 被 调用 。 


应 用 组 件 看 起 来 如 下 所 示 。 












































(D https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html 
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code/advanced_components/app/ts/lifecycle-hooks/lifecycle_01.ts 


@Component( { 
selector: 'lifecycle-sample-app', 
template: ~ 
«h4 class="ui horizontal divider header"» 
OnInit and OnDestroy 
«/h4» 


«button class="ui primary button" (click)="toggle()"> 
Toggle 
«/button» 
«on-init «nglIfz"display"»«/on-init» 
}) 
export class LifecycleSampleApp1 { 
display: boolean; 


constructor() { 
this.display = true; 
} 


toggle(): void { 
this.display = !this.display; 
} 
} 


AUGUSTA, ATLA Sjoninitf4 teal tbe ECCO T, WI 14-1687. 


© CO / P Angular 2 - Utecycie hooks x | Felipe | 











> Q | localhost:62935 ws 





o ne-book2 Angular 2 Lifecycle Hooks 


Onlnit and OnDestroy 


€— 





R O | Elements Console Sources Network Timeline Profiles Resources Security Audits 2| i x] 
© Ww <top frame> v Preserve log 
Live reload enabled. index):79 
>XHR finished loading: GET "http://localhost:62935/app. js". system.src.js:1049 
On init app.ts:26 
Angular 2 is running in the development mode. Call enableProdMode() to enable the production angular2.dev.j5:354 
mode. 
DEPRECATION WARNING: 'dequeueTask' is no longer supported and will be removed in next angular2-polyfills.js:1152 


major release. Use removeTask/removeRepeat ingTask/removeMicroTask 











图 14-16 组件 的 初始 状态 


14.5 生命 周期 钩子 373 





在 第 一 次 点 击 Toggle 按 钮 时 , 组 件 被 销毁 , OonDestroy 钩 子 也 如 预期 一 般 被 调用 了 , 如 图 14-17 
所 示 。 














@ DO / P angular 2- Litecycie hooks x \ Felipe || 
© > © 1B localhost:62935 Dy = 
| 9 ne-book2 Angular 2 Lifecycle Hooks 
| 
Oninit and OnDestroy 
Toggle 
| 
| (& O | Elements Console Sources Network Timeline Profiles Resources Security Audits asp ox 
| © Ww «top frame» v Preserve log 
q bXHR finished loading: GET "http://localhost:62935/app. js". system. src. js:1049 | 
On init app.ts:26 | 
Angular 2 is running in the development mode. Call enableProdMode() to enable the production angular2.dev. js:354 
mode. 
A DEPRECATION WARNING: 'dequeueTask' is no longer supported and will be removed in next ingular2-polyfills.js:1152 
| major release. Use removeTask/removeRepeat ingTask/removeMicroTask 
On destroy app.ts:30 











图 14-17 OnDestroyf4-f: 首次 点 击 Toggle 按 钮 


如 果 再 次 点 击 Toggle 按 钮 ， 结 果 将 如 图 14-18 所 示 。 


u——— [3 
© > @ [D localhost62935 次 | 三 











ngbook2 Angular 2 Lifecycle Hooks 


Oninit and OnDestroy 


IL ME © Init/Destroy 





R O Elements Console Sources Network Timeline Profiles Resources Security Audits 





© Ww «top frame» v E Preserve log 
0n init 
Angular 2 is running in the development mode. Call enableProdMode() to enable the production angular2.dev.j5:354 
mode. 


DEPRECATION WARNING: 'dequeueTask' is no longer supported and will be removed in next angular2-polyfills.js:1152 
major release. Use removeTask/removeRepeatingTask/removeMicroTask 


On destroy app.ts: 
On init app.ts:26 





图 14-18 OnDestroyf-f: 再 次 点 击 Toggle 按 钮 
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14.5.2 OnChanges 


OnChanges 钩 子 在 一 个 或 多 个 组 件 属性 更 改 后 调用 。ngonChanges 方 法 会 接收 一 个 参数 来 告 
诉 你 哪些 属性 发 生 了 改变 。 


为 了 更 好 地 理解 这 一 点 , 我 们 来 编写 一 个 评论 组 件 。 该 组 件 有 两 个 输入 属性 : name 和 comment。 


























code/advanced_components/app/ts/lifecycle-hooks/lifecycle_02.ts 


@Component ( { 
selector: 'on-change', 
template: ^ 
«div class="ui comments"» 
«div class="comment" > 
<a class="avatar"> 
<img src="app/images/avatars/matt. jpg"> 
</a> 
«div class="content"> 
<a class="author">{{name}}</a> 
«div class="text"> 
{ {comment } } 
</div> 
</div> 
</div> 
</div> 


}) 

class OnChangeCmp implements OnChanges { 
GInput('name') name: string; 
GInput('comment') comment: string; 


ngOnChanges(changes: {[propName: string]: SimpleChange}): void { 
console.log('Changes', changes); 
j 
j 





























最 重要 的 一 点 是 ， 这 个 组 件 实现 了 onchanges 接 口 ， 并 声明 了 该 接口 的 ngonChanges 方 法 。 


code/advanced_components/app/ts/lifecycle-hooks/lifecycle_02.ts 


ngOnChanges(changes: {[propName: string]: SimpleChange}): void { 
console.log('Changes', changes); 


} 


当 name 属 性 或 comment 属 性 的 值 发 生变 化 时 ， 这 个 方法 就 会 被 触发 。 这 时 ， 我 们 就 会 收 到 一 
个 对 象 ， 它 把 发 生变 化 的 字段 映射 到 simpleChange 对 象 中 。 

每 个 SimpleChange 实 例 都 有 两 个 字段 : currentValue 和 previousValue。 如 果 组 件 的 name 
和 comment 属性 都 发 生 了 变化 ， 那 么 该 方法 的 changes 值 就 应 该 是 这 样 的 。 

{ 


name: { 

















currentValue: 'new name value', 
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previousValue: 'old name value' 


m 

comment: { 
currentValue: 'new comment value', 
previousValue: 'old comment value' 


} 
} 
现在 对 应 用 组 件 进行 修改 , 让 它 使 用 我 们 的 组 件 并 添加 一 个 小 型 表单 。 这样 就 可 以 试 试 与 组 
件 的 name 属 性 和 comment 属 性 的 交互 了 。 











ni 














code/advanced components/app'/ts/lifecycle-hooks/lifecycle 02.ts 


GComponent ( f 
selector: 'lifecycle-sample-app', 
template: ^ 
«h4 class="ui horizontal divider header"» 
OnInit and OnDestroy 
«/h4» 


«button class-"ui primary button" (click)="toggle()"> 
Toggle 

«/button» 

«on-init xngIf-"display"»«/on-init» 





«h4 class="ui horizontal divider header"» 
OnChange 
«/h4» 


«div class-"ui form"» 
«div class="field"> 
«label»Name«/label» 
<input type="text" snamefld value="{{name}}" 
(keyup)="setValues(namefld, commentfld)"» 
</div> 


«div class="field"> 
<label>Comment</label> 
«textarea (keyup)-"setValues(namefld, commentfld)" 
rows="2" #commentfld> {{comment}}</textarea> 
</div> 
</div> 


«on-change [name]="name" [comment ]="comment"></on—change> 


}) 
export class LifecycleSampleApp2 { 


display: boolean; 
name: string; 
comment: string; 





constructor() { 
this.display = true; 
this.name = 'Felipe Coury'; 
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this.comment = 'I am learning so much!'; 


} 


setValues(namefld, commentfld): void { 
this.name = namefld.value; 
this.comment = commentfld.value; 


} 


toggle(): void { 
this.display = !this.display; 


} 


we 





重点 是 我 们 往 模板 中 添加 了 一 个 新 的 表单 ， 这 个 表单 有 name 和 comment 两 个 字段 。 





code/advanced_components/app/ts/lifecycle-hooks/lifecycle_02.ts 


«div class-"ui form"> 
«div class="field"> 
«label»Name«/label» 
<input type="text" snamefld value="{{name}}" 
(keyup )="setValues(namefld, commentfld)"» 


</div> 


«div class="field"> 
<label>Comment</label> 
<textarea (keyup)-"setValues(namefld, commentfld)" 
rows="2" #commentfld>{{comment}}</textarea> 


</div> 
</div> 


无 论 在 name 字 段 还 是 comment 字 段 的 keyup 事 件 触发 时 , 我 们 都 通过 模板 变量 调用 setValues 
方法 。 模 板 变量 namef1d 和 commentf1d 分 别 代表 这 里 的 input 和 textarea。 


这 个 方法 只 是 取出 这 些 字段 的 值 并 更 新 对 应 的 name 和 comment 属 性 。 




















code/advanced_components/app/ts/lifecycle-hooks/lifecycle_02.ts 


setValues(namefld, commentfld): void { 
this.name = namefld.value; 
this.comment = commentfld.value; 


} 
现在 ， 当 我 们 第 一 次 打开 应 用 时 ， 就 会 看 到 Onchanges 钩 子 被 调用 了 ， 如 图 14-19 所 示 。 
这 个 事件 在 刚刚 设置 了 初始 值 时 发 生 在 LifecycleSampleApp 组 件 的 构造 函数 中 。 


如 果 在 Name 输 入 框 中 进行 输入 ， 就 会 看 到 多 子 函数 不 断 被 重复 调用 。 如 图 14-20 所 示 ， 当 我 
们 在 Name 输 入 框 中 粘贴 Nate Murray 时 ， 控 制 台 正如 我 们 预期 的 那样 反映 出 了 值 的 变化 。 
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Angular 2 - Lifecycle hooks X |. 


[fee | 
e> C D localhost: i080 











Ed w»«2 Angular 2 Lifecycle Hooks 


Onlnit and OnDestroy 


OnChange 
Name 


Felipe Coury 


Comment 


lam learning so much! 


Felipe Coury 


| am learning so much! 





R O Elements Console 


Sources Network Timeline Profiles 
© Ww <top frame> 


Resources Security Audits 
v B Preserve log 
Changes wObject (name: SimpleChange, comment: SimpleChange) ©) 
" comment: SimpleChange 
currentValue: "I am learning so much!" 
> previousValue: Object 
b proto : SimpleChange 
"name: SimpleChange 
currentValue: "Felipe Coury" 
> previousValue: Object 
b proto SimpleChange 
b proto : Object 





图 14-19 OnChanges f: 首次 打开 应 用 时 


© OO / P angular 2- Litecycie hooks x \\ 


[fete | 
€ > Q |D localhost:8080 — ee | we 


ng-book2 Angular 2 Lifecycle Hooks 











Onlnit and OnDestroy 


OnChange 
Name 


Nate Murray 


Comment. 


lam learning so much! 


Nate Murray 
lam learning so much! 





m D Elements Console Sources 
© Ww <top frame> 


Network Timeline Profiles Resources Security Audits 


v O Preserve log 


Changes w Object (name: SimpleChange) E 
* name: SimpleChange 
currentValue: "Nate Murray" 
previousValue: "Felipe Coury" 
> proto : SimpleChange 
b. proto : Object 





图 14-20 OnChanges44- f fa AJri 
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14.5.3 DoCheck 








Angular 默 认 的 通知 系统 就 是 通过 onchanges 实 现 的 ， 每 当 Angular 的 变更 检测 机 制 检测 到 指 
令 的 属性 变化 时 就 会 触发 它 。 


然而 ， 有 时 候 这 种 变更 通知 机 制 可 能 开销 过 大 ， 尤 其 是 在 对 性 能 要 求 较 高 的 场景 下 。 


有 时 候 , 我 们 只 想 在 特定 的 条 件 下 进行 一 些 操作 ， 比 如 在 移 除 或 添加 一 个 项 目 时 , 或 是 在 某 
个 特定 的 属性 发 生变 化 时 。 


如 果 遇 到 上 述 场景 之 一 ， 就 可 以 使 用 Docheck 钩 子 。 
























































A 有 一 点 非常 重要 ， 如 果 我 们 同时 实现 了 OnChanges 和 DoCheck， 那 么 0nChanges 
会 被 DoCheck 鹤 盖 ， 也 就 是 说 OnChanges 会 被 忽略 。 
1. 变更 检测 
为 了 找 出 有 哪些 变化 ，Angular 提 供 了 differ ( 差分 器 ) 类 。differ 会 对 指令 的 某 个 属性 进行 计 
算 ， 以 确定 它 是 否 发 生 了 改变 。 
有 两 种 内 置 的 differ 类 型 : 和 迭代 differ 和 键 值 对 differ。 
2. 迭代 differ 


当 我 们 使 用 列表 类 的 数据 结构 并 且 只 想 知道 在 列表 中 添加 或 删除 了 哪些 条 目 时 , 应 该 使 用 和 迭 
代 differ。 


3. 键 值 对 differ 


当 我 们 使 用 字典 类 数据 结构 时 ， 应 该 使 用 键 值 对 differ; 它 在 键 一 级 工作 。 这 个 differ 会 识别 
出 键 的 添加 、 删 除 或 某 个 键 对 应 值 的 改变 。 


4. 使 用 do-check-item 泻 染 单 条 评论 
为 了 闸 明 这 些 概念 ， 我 们 来 构建 一 个 演 染 一 系列 评论 的 组 件 ， 如 图 14-21 所 示 。 
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g Justen posted a comment 1 
Thanks! 
Ü Remove Æ Clear «* 12 Likes 
^ 
= Jenny posted a comment 


Ours is a life of constant reruns. We're always circling back to where we'd we 
started, then starting all over again. Even if we don't run extra laps that day, we 
surely will come back for more of the same another day soon. 

Ü Remove A Clear €". 4Likes 





g Justen posted a comment 


Really cool! 
Ü Remove Æ Clear ® 7 Likes 


114-21 DoCheck $ Fas (hl 
首先 ， 我 们 编写 一 个 泻 染 单条 评论 的 组 件 。 


code/advanced_components/app/ts/lifecycle-hooks/lifecycle_03.ts 





GComponent( { 
selector: 'do-check-item', 
outputs: ['onRemove'], 
template: ~ 
«div class-"ui feed"> 
«div class="event"> 
«div class="label" xngIf-z"comment.author"» 
«img src-"/app/images/avatars/[ (comment . author .toLowerCase()}}.jpg"> 
«/div» 
«div class="content"> 
«div classz"summary"» 
«a class="user"> 
{{comment. author] ] 
«/a» posted a comment 
«div class-"date"» 
1 Hour Ago 
«/div» 
«/div» 
«div class="extra text"> 
{ {comment . comment } } 
</div> 
«div class="meta"> 
«a class="trash" (click)="remove()"> 
<i class="trash icon"»«/i» Remove 
</a> 
<a Class="trash" (click)="clear()"> 
<i class-"eraser icon"»«/i» Clear 
</a> 
<a class-"like" (click)="like()"> 
<i class-"like icon"></i> {{comment.likes}} Likes 
</a> 
</div> 
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</div> 
</div> 
</div> 


}) 

我 们 声明 了 组 件 的 元 数据 。 组 件 会 接收 输入 属性 comment 并 泻 染 它 ， 还 会 在 点 击 删除 按钮 时 
发 出 一 个 事件 。 

继续 看 组 件 类 的 实现 。 


code/advanced_components/app/ts/lifecycle-hooks/lifecycle_03.ts 








class DoCheckItem implements DoCheck { 
GInput('comment') comment: any; 
onRemove: EventEmitter«any»; 
differ: any; 


在 这 个 类 声明 中 ， 我 们 实现 了 pocheck 接 口 ， 并 且 声 明了 输入 属性 comment 、 输 出 事件 
onRemove 和 一 个 di ffer 属 性 。 








code/advanced_components/app/ts/lifecycle-hooks/lifecycle_03.ts 


constructor(differs: KeyValueDiffers) { 
this.differ = differs. find([]).create(null); 
this.onRemove = new EventEmitter(); 


} 


在 这 个 构造 函数 中 ， 我 们 用 differs 变量 接收 了 一 个 KeyValueDiffers 的 实例 ， 然 后 通过 
differs.find([]).create(null) 语 法 创建 了 一 个 键 值 对 differ 的 实例 。 我 们 还 初始 化 了 事件 发 
射 器 onRemove 。 


接 下 来 ， 我 们 来 实现 接口 要 求 的 ngpocheck 方 法 。 


code/advanced_components/app/ts/lifecycle-hooks/lifecycle_03.ts 








id 


























ngDoCheck(): void { 
var changes - this.differ.diff(this.comment); 


if (changes) ( 
changes.forEachAddedItem(r -» this.logChange('added', r)); 
changes.forEachRemovedItem(r => this.logChange('removed', r)); 
changes.forEachChangedItem(r => this.logChange('changed', r)); 
j 
j 
这 里 用 键 值 对 differ 检 测 了 变更 ， 只 要 调用 giff 方 法 并 提供 想 要 检查 的 属性 就 可 以 了 。 在 这 
个 例子 中 ， 我 们 想 知 道 comment 属 性 是 否 发 生 了 变化 。 
当 没有 检测 到 任何 变化 时 ， 返 回 值 就 是 nu11。 如 果 有 变化 ， 我 们 可 以 调用 differ 上 的 三 个 不 
同 的 迭代 方法 : 
口 forEachAddedItem ， 用 于 枚 举 所 有 新 增 的 键 ; 




















14.5 ”生命 周期 钩子 381 





D forEachRemovedItem， 用 于 枚 举 所 有 删除 的 键 ; 
D forEachChangedItem ， 用 于 枚 举 所 有 变化 的 键 。 


每 个 方法 都 会 调用 我 们 提供 的 接收 record 参 数 的 回调 函数 。 对 于 键 值 对 differ， 这 个 record 参 
数 是 KVchangeRecord 类 的 实例 ( 如 图 14-22 所 示 )。 











Y KVChangeRecord (key: "likes", previousValue: null, currentValue: 10, _nextPrevious: null, next: null.) 

.next: null 

.nextAdded: null 

.nextChanged: null 

.nextPrevious: null 

.nextRemoved: null 

_prevRemoved: null 

currentValue: 10 

key: "likes" 

previousValue: 10 





图 14-22 ”KVChangeRecord 实 例 的 一 个 例子 
用 来 了 解 变 化 的 最 重要 的 几 个 字 役 是 key . previousValue 和 currentValue。 
接 下 来 ,我们 写 一 个 方法 ， 把 发 生 的 这 些 变 化 以 通俗 易 懂 的 句子 输出 到 控制 台中 。 


code/advanced_components/app/ts/lifecycle-hooks/lifecycle_03.ts 

















logChange(action, r) { 
if (action === 'changed') { 
console.log(r.key, action, 'from', r.previousValue, 'to', r.currentValue); 





j 
if (action === 'added') { 
console.log(action, r.key, 'with', r.currentValue); 
j 
if (action === 'removed') { 
console.log(action, r.key, '(was ' + r.previousValue + ')'); 
} 
j 


Bot, FADES ILA ITE, DRAKA E HEMER DocCheck FF 


code/advanced_components/app/ts/lifecycle-hooks/lifecycle_03.ts 


remove(): void { 
this.onRemove.emit(this.comment) ; 


} 


clear(): void { 


delete this.comment.comment; 
j 


like(): void ( 
this.comment.likes += 1; 
j 
remove( ) 方 法 会 发 出 事件 ， 表 示 用 户 请 求 删 除 这 条 评论 。clear( ) 方 法 会 把 评论 文字 从 评论 
对 象 中 删除 。1ike( ) 方 法 会 增加 这 条 评论 的 “ 赞 ” 数 。 
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5. 使 用 do-check 泻 染 评论 列表 
写 好 了 表示 单条 评论 的 组 件 之 后 ， 我 们 再 来 写 第 二 个 组 件 ， 它 负责 泻 染 评论 列表 。 




















code/advanced_components/app/ts/lifecycle-hooks/lifecycle_03.ts 


@Component ( { 
selector: 'do-check', 
template: ^ 
«do-check-item [comment ]="comment" 
«ngFor="let comment of comments" (onRemove)="removeComment($event )"> 
</do-check-item> 


«button class="ui primary button" (click)-"addComment()"» 


Add 
</button> 


}) 


组 件 的 元 数据 十 分 简单 : 使 用 上 面 创建 的 组 件 ， 然 后 用 ngFor 来 遍历 组 件 列表 并 泻 染 它 们 。 
我 们 还 加 了 一 个 按钮 让 用 户 添加 新 评论 。 


接 下 来 实现 评论 列表 类 DoCheckCmp。 











code/advanced components/app/ts/lifecycle-hooks/lifecycle 03.ts 


class DoCheckCmp implements DoCheck { 
comments: any[]; 
iterable: boolean; 
authors: string[]; 
texts: string[]; 
differ: any; 


我 们 声明 了 要 月 











ay 


的 变量 : comments, iterable, authors flltexts, 


lim 





code/advanced components/app'/ts/lifecycle-hooks/lifecycle 03.ts 


constructor(differs: IterableDiffers) { 
this.differ = differs. find([]).create(null); 
this.comments = []; 


this.authors = ['Elliot', 'Helen', 'Jenny', 'Joe', 'Justen', 'Matt']; 
this.texts - [ 
"Ours is a life of constant reruns. We're always circling back to where we\ 
'd we started, then starting all over again. Even if we don't run extra laps tha\ 
t day, we surely will come back for more of the same another day soon.", 
'Really cool!', 
"Thanks!" 


]; 


this.addComment(); 
j 


对 于 这 个 组 件 , 我 们 使 用 了 迭代 differ。 可 以 看 到 这 里 用 来 创建 differ 的 类 是 IterableDiffers， 
但 创建 differ 的 方式 还 是 和 以 前 一 样 。 
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在 构造 函数 中 , 我们 还 初始 化 了 作者 列表 和 评论 文字 列表 , 会 在 添加 新 评论 的 时 候 用 到 它们 。 
最 后 ， 我 们 调用 addComment() 方 法 。 这 样 ， 评 论 列表 在 应 用 刚刚 初始 化 时 不 会 是 空白 的 。 
接 下 来 的 三 个 方法 是 用 来 添加 一 条 新 评论 的 。 


code/advanced_components/app/ts/lifecycle-hooks/lifecycle_03.ts 








getRandomInt(max: number): number { 
return Math. floor(Math.random() * (max + 1)); 


} 


getRandomItem(array: string[]): string { 
let pos: number = this.getRandomInt(array.length - 1); 
return array[pos]; 


} 


addComment(): void { 
this.comments.push(Í 
author: this.getRandomItem(this.authors), 
comment: this.getRandomItem(this.texts), 
likes: this.getRandomInt(20) 
D); 
} 


removeComment(comment) { 
let pos = this.comments.indexOf(comment) ; 
this.comments.splice(pos, 1); 


} 
我 们 声明 了 两 个 方法 ， 它 们 分 别 返回 一 个 随机 数 和 一 个 数组 中 的 随机 项 。 
最 后 ，addComment( ) 方 法 会 使 用 随机 作者 、 随 机 文本 和 随机 点 赞 数 来 添加 一 条 新 评论 。 
接 下 来 是 removeComment() 方 法 ， 它 用 来 从 列表 中 删除 一 条 评论 。 


code/advanced_components/app/ts/lifecycle-hooks/lifecycle_03.ts 


removeComment(comment) { 
let pos = this.comments.indexOf(comment); 
this.comments.splice(pos, 1); 


] 
最 后 声明 变更 检测 方法 ngDoCheck( )。 


code/advanced components/app/ts/lifecycle-hooks/lifecycle 03.ts 


ngDoCheck(): void { 
var changes = this.differ.diff(this.comments); 





if (changes) { 
changes. forEachAddedItem(r => console.log('Added', r.item)); 
changes. forEachRemovedItem(r => console.log('Removed', r.item)); 
} 
j 
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尽管 在 行为 上 与 键 值 对 differ 一 样 ， 但 是 迭代 differ 只 提供 了 添加 和 删除 条 目的 方法 。 


= 


当 运 行 应 用 时 ， 我 们 得 到 了 一 个 只 有 一 条 评论 的 列表 Cün 14-23 rz )。 




















@ © OQ angu 2 - Utecycio hooks x | Feline | 
© > Q D localhost:8080 Dj - 
Comment 





lam learning so much! 


Felipe Coury 
lam learning so much! 


DoCheck 


Qo Matt posted acomment :1 
(urs is a life of constant reruns. We're always circling back to where we'd we 
started, then starting all over again. Even if we don't run extra laps that day, we 
surely will come back for more of the same another day soon. 
B Remove 4 Clesr 时 14Likes 








TR D | Elements Console Sources Network Timeline Profiles Resources Security Audits a IES 
© Y <top frame> v O Preserve log 
Changes » object app. ts:63 
Added » object 15:21 
0n init app.ts:31 
added author with Matt app. tsi 130 


added comment with Ours is a life of constant reruns. We're always circling back to where we'd we started, then app.ts:130 
darin all over again. Even if we don't run extra laps that day, we surely will come back for more of the same another 


day s 
added E with 14 app.ts:130 


ee 
图 14-23 ”初始 状态 
我 们 还 看 到 一 些 信息 被 打印 到 了 控制 台中 ， 就 像 下 面 这 样 。 


added author with Matt 








added likes with 14 


我 们 来 看 看 ， 点 击 Add 按 钮 来 添加 一 条 新 评论 时 会 发 生 什 么 ( 如 图 14-24 所 示 )。 


| 8.9.9. /Yer?- utecycie noors x (Gi 








& > Œ [D localhost:8080 1 





Felipe Coury 
lam learning so much! 


DoCheck 


2 Matt posted a comment 


Ours is a life of constant reruns. We're always circling back to where we'd we 
started, then starting all over again. Even if we don't run extra laps that day, we 

surely will come back for more of the same another day soon, | 
f Remove Z Clear 9 14Uk 


QU Helenposteda comment 





Thanks! 
Remove 9 * vu 

R O | Elements Console Sources Network Timeline Profiles Resources Security Audits og 

© V <topframe> v E Preserve log 
Added Object (author: "Helen", comment: "Thanks!", likes: 17) app.ts:210 
added author with Helen app.ts:130 
added comment with Thanks! app.ts:130 
added likes with 17 app.ts:130 








图 14-24 ”添加 的 评论 
可 以 看 到 迭代 differ 识 别 出 了 添加 到 列表 中 的 新 评论 对 象 {author: "Hellen", 





comment : 
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"Thanks!", likes: 17}. 


评论 对 象 中 单独 的 属性 变化 也 打印 出 来 了 ， 也 就 是 键 值 对 differ 检 测 到 的 。 


added author with Helen 
added comment with Thanks! 
added likes with 17 


现在 点 击 这 条 新 评论 的 Likes 图 标 ( 如 图 14-25 所 示 )。 





9 © 0 / P angular 2- Litecycie hooks > MM Felpe || 


© > © D localhost:8080 D 


2 Felipe Coury 
Jam learning so much! 











DoCheck 


DZ Mattposteda comment 


Iways circling back to where we'd we 
extra laps that day, we 










© Helen posteda comment 


Thanks! | 
Remove Cher iste 
ES | 
Q O Elements Console Sources Network Timeline Profiles Resources Security Audits fox 
© Ww «top frame» * (Preserve log 
likes changed from 17 to 18 app.ts:127 


> 








——— 
图 14-25 PB E 


现在 只 有 1ike 属 性 的 变化 会 被 检测 到 。 
如 果 点 击 Clear 图 标 ， 它 会 从 评论 对 象 中 删除 comment 键 ( 如 图 14-26 所 示 )。 


| © © © / B aguiar 2- utecyee nooks x Felipe | 
© > Œ |D localhost8080 Py = 














Felipe Coury 
lam learning so much! 


DoCheck 


2 Matt posted a comment. 1 


Ours is a life of constant reruns. We're always circling back to where we'd we 
started, then starting all over again. Even if we don't run extra laps that day, we 
surely will come back for more of the same another day soon. 

B Remove A Clear 99 14Likes 


© treien posted a comment 





B Remove 4 Clear 9 18 Likes 
T Ü | Elements Console Sources Network Timeline Profiles Resources Security Audits i x 
© Ww <top frame> v B Preserve log 

removed comment (was Thanks!) app.ts:133 


E 








图 14-26 清空 评论 内 容 
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打印 出 的 日 志 证 实 这 个 键 确实 被 删除 了 
最 后 ， 我 们 通过 点 击 Remove 图 标 删除 最 后 一 条 评论 ( 如 图 14-27 所 示 )。 








@ OG /Yanouar?2-Litecyclehooks x 


© D localhost:8080 





DoCheck 





民 O | Elements Console Sources Network Timeline Profiles Resources Security Audits 


© W <top frame> v E Preserve log 


Removed Object {author: "Helen", likes: 18} app.ts:211 





114-27 ”删除 评论 
如 预期 一 样 ， 我 们 得 到 了 一 条 对 象 被 删除 的 日 志 。 








14.5.4 AfterContentInit, AfterViewInit, AfterContentChecked 和 
AfterViewChecked 
AfterContent Init FMA AZ feonInit Za. — HESS MANA eek, et 
会 立即 调用 它 。 
AfterContentChecked 也 类 似 ， 不 过 它 是 在 指令 检查 结束 后 调用 的 。 这 里 的 “检查 ”是 指 变 
更 检测 系统 进行 的 检查 。 
另外 两 个 钧 子 AfterViewInit 和 AfterViewChecked 会 紧 跟 着 上 述 内 容 钩 子 , 在 视图 完全 初始 
化 之 后 触发 。 但 是 这 两 个 钧 子 只 适用 于 组 件 ， 不 能 用 于 指令 。 
同时 ，AfterXXxIn 让 之 类 的 钩子 在 整个 指令 生命 周期 里 都 只 会 被 调用 一 次 ， 而 
AfterXXXChecked 之 类 的 钩子 在 每 次 变更 检测 周期 后 都 会 被 调用 。 
为 了 更 好 地 理解 这 些 , 我 们 来 编写 另 一 个 组 件 , 它 会 对 每 个 生命 周期 钩子 都 打印 日 志 到 控制 
台 。 它 还 有 一 个 counter 属 性 ， 可 以 通过 点 击 按钮 来 增加 计数 。 


code/advanced components/app/ts/lifecycle-hooks/lifecycle 04.ts 


















































@Component ( { 
selector: 'afters', 
template: ^ 
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«div class="ui label"» 
«i class-"list icon"></i> Counter: {{ counter }} 
«/div» 


«button class="ui primary button" (click)="ine()"> 
Increment 
«/button» 


}) 
class AftersCmp implements OnInit, OnDestroy, DoCheck, 
OnChanges, AfterContentInit, 
AfterContentChecked, AfterViewInit, 
AfterViewChecked { 
counter: number; 


constructor() { 


console.log('AfterCmd --------- [constructor]'); 
this.counter - 1; 

j 

inc() { 
console.log('AfterCmd --------- [counter]'); 


this.counter += 1; 


, 


ngOnInit() { 
console.log('AfterCmd - OnInit'); 


ngOnDestroy() { 
console.log('AfterCmp - OnDestroy'); 


ngDoCheck() { 
console.log('AfterCmp - DoCheck'); 


ngOnChanges() { 
console.log('AfterCmp - OnChanges'); 


ngAfterContentInit() { 
console.log('AfterCmp - AfterContentInit'); 


ngAfterContentChecked() { 
console.log('AfterCm 


oO 
l 


AfterContentChecked' ); 


ngAfterViewInit() { 
console.log('AfterCmp - AfterViewInit'); 











ngAfterViewChecked() { 
console.log('AfterCmp - AfterViewChecked'); 
j 
j 








现在 把 它 和 Toggle 按 钮 添加 到 应 用 组 件 中 ， 就 像 之 前 在 onDpestroy 钧 子 中 的 用 法 一 样 。 


code/advanced_components/app/ts/lifecycle-hooks/lifecycle_04.ts 


<afters «ngIf-"displayAfters"»«/afters» 
«button class="ui primary button" (click)="toggleAfters()"> 
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Toggle 
</button> 





应 用 组 件 的 最 终 实 现 看 起 来 应 该 是 这 样 的 。 





code/advanced_components/app/ts/lifecycle-hooks/lifecycle_04.ts 


@Component ( { 


}) 


selector: 'lifecycle-sample-app', 

template: ^ 

«h4 class="ui horizontal divider header"» 
OnInit and OnDestroy 

«/h4» 


«button class="ui primary button" (click)="toggle()"> 
Toggle 

«/button» 

«on-init xngIf-"display"»«/on-init» 





«h4 class="ui horizontal divider header"» 
OnChange 
«/h4» 


«div class-"ui form"> 
«div class="field"> 
«label»Name«/label» 
<input type="text" snamefld value="{{name}}" 
(keyup)="setValues(namefld, commentfld)"» 
</div> 


«div class="field"> 
<label>Comment</label> 
<textarea (keyup)-"setValues(namefld, commentfld)" 
rows="2" #commentfld>{{comment}}</textarea> 
</div> 
</div> 


«on-change [name]="name" [comment ]="comment"></on—change> 


«h4 class="ui horizontal divider header"> 
DoCheck 
«/h4» 


«do-check» «/do-check» 


«h4 class="ui horizontal divider header"» 
AfterContentInit, AfterViewInit, AfterContentChecked and AfterViewChecked 
«/h4» 


<afters «ngIf-"displayAfters"»«/afters» 

«button class="ui primary button" (click)="toggleAfters()"> 
Toggle 

</button> 
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export class LifecycleSampleApp4 { 
display: boolean; 
displayAfters: boolean; 
name: string; 
comment: string; 


constructor() { 
// OnInit and OnDestroy 
this.display = true; 


// OnChange 
this.name = 'Felipe Coury'; 
this.comment = 'I am learning so much!'; 


// AfterXXX 
this.displayAfters - true; 


setValues(namefld, commentfld) { 
this.name - namefld.value; 
this.comment - commentfld.value; 


~ 


toggle(): void 
this.display 
} 


I 


Ithis.display; 


toggleAfters(): void { 
this.displayAfters - !this.displayAfters; 
j 
j 


当 应 用 启动 后 ， 我 们 可 以 看 到 每 个 钩子 都 打印 了 日 志 〈 如 图 14-28 所 示 )。 




















(9 0 9 / Wanguiar 2- Litecycie hooks x \\ | Felipe | 
& > C [5 localhost:8080 v= 
DoCheck 
o Jenny posted a comment 
Ours isa life of constant reruns. We're always circling back to where we'd we 
started, then starting all over again. Even if we don't run extra laps that day, we 
surely will come back for more of the same another day soon. 
B Remove 4 Clear Y 7Like 
AfterContentlnit, AfterViewinit, AfterContentChecked and AfterViewChecked 
om EE 
民 [] Elements Console Sources Network Timeline Profiles Resources Security Audits 2d. d 0X 
© wv «topf v E Preserve log 
virer uay tanesi rp 
AfterCmd [constructor] app.tsi236 
On init app.tsi31 
AfterCmd - OnInit app.tsi244 
AfterCmp - DoCheck app.ts:250 
AfterCmp - AfterContentInit app.ts:256 
AfterCmp - AfterContentChecked app.ts:259 
AfterCmp - AfterViewInit app.ts:262 
AfterCmp - AfterViewChecked app.ts:265 
added author with Jenny app.ts:130 
added comment with Ours is a life of constant reruns. We're always circling back to where we'd we started, app.ts:130 

















图 14-28 ”应 用 启动 
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现在 我 们 清空 控制 台 并 点 击 Increment 按 钮 ( 如 图 14-29 所 示 )。 











© © © / P angular 2- Litecycie hooks x \\ Felipe | 
4 > @ | tocalhost:8080 wv = 
DoCheck 
@ sennyposted acomment 111eur Aso 


Ours is a life of constant reruns. We're always circling back to where we'd we 
started, then starting all over again. Even if we don't run extra laps that day, we 
surely will come back for more of the same another day soon. 


D Remove 4 Clear 9 7Likes 
AfterContentlnit, AfterViewlnit, AfterContentChecked and AfterViewChecked 





民 D | Elements Console Sources Network Timeline Profiles Resources Security Audits ig 
© Ww «top frame» v O Preserve log 
AfterCmd 一 一 [counter] app.ts:240 
AfterCmp - DoCheck app.ts:250 
AfterCmp - AfterContentChecked app.ts:259 
AfterCmp - AfterViewChecked app.ts:265 








图 14-29 ”计数 增加 


可 以 看 到 , 这 次 只 触发 了 DoCcheck 、AfterContentChecked 和 AfterViewChecked 这 三 个 钩子 。 
如 果 点 击 Toggle 按 钮 ， 将 如 图 14-30 所 示 。 














@ OO / P angular 2- Litecycie hooks x Co Felipe 
> Q | [ localhost:8080 xz 
DoCheck 


QU  sennypostedacomment io 


Ours is life of constant reruns. We're always circling back to where we'd we 
started, then starting all over again. Even if we don't run extra laps that day, we 
surely will come back for more of the same another day soon. 


B Remove Æ Clear € 7Likes 


AfterContentinit, AfterViewlnit, AfterContentChecked and AfterViewChecked 


| 





RO Elements Console Sources Network Timeline Profiles Resources Security Audits 1 3 
© VY <top frame> v D Preserve log 
AfterCmp — OnDestroy app.ts:247 








114-30 ”首次 切换 
接着 再 点 击 一 次 Toggle 按 钮 ， 将 如 图 14-31 所 示 。 
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@ CO / p angular 2- Litecycie hooks x \ à | Fetipe | 














= > C [D localhost:8080 Ws 





DoCheck 


o Jenny posted a comment. : | 


Ours is a life of constant reruns. We're always circling back to where we'd we 
started, then starting all over again. Even if we don't run extra laps that day, we 
surely will come back for more of the same another day soon. 

O Remove 4 Clear 9 7Like 


AfterContentinit, AfterViewlnit, AfterContentChecked and AfterViewChecked 


a o: NEN EE 





Q O Elements Console Sources Network Timeline Profiles Resources Security Audits ix 

© Ww «top frame» v (Preserve log 
AfterCmp - OnDestroy app.ts:247 
AfterCmd — —- [constructor] app.ts:236 
AfterCmd - OnInit app.ts:244 
AfterCmp ~ DoCheck app.ts:250 
AfterCmp - AfterContentInit app.ts:256 
AfterCmp - AfterContentChecked app.ts:259 
AfterCmp - AfterViewInit app.ts:262 
AfterCmp - AfterViewChecked app.ts:265 








图 14-31 再 次 切换 
所 有 钩子 都 被 触发 了 。 


14.6 ”高 级 模板 


template 元 素 是 种 特殊 的 元 素 ， 用 来 创建 可 以 动态 操控 的 视图 。 


为 了 使 template 元 素 用 起 来 更 简单 ， Angular 提 供 了 一 些 语法 糖 来 创建 template 元 素 , 因此 通常 
不 需要 手动 创建 。 


举例 来 说 ， 如 果 我 们 写 : 


«do-check-item 
*ngFor="let comment of comments" 
[comment ] 2" comment " 
(onRemove )="removeComment ( $event ) "» 
«/do-check-item» 


它 就 会 转换 成 : 


«do-check-item 
template="ngFor let comment of comments; #i=index" 
[comment ] -" comment" 
(onRemove )="removeComment ( $event ) "» 

«/do-check- item» 


接着 转换 成 : 


<template 
ngFor 
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[ngForOf]="comments" 
let-comment="$implicit" 
let-index="i"> 
<do-check-item 

[comment ]="comment" 

(onRemove )="removeComment ( $event ) "> 
</do-—check-item> 

</template> 


理解 其 背后 的 概念 很 重要 ， 这 样 我 们 才能 构建 自己 的 指令 。 














14.6.1 Æ5 ngIf: ngBookIf 
我 们 来 创建 一 个 指令 ， 它 和 ngIf 所 做 的 事情 完全 一 样 。 我 们 称 之 为 ngBookIf。 
1. ngBookIf 的 @Directive 
我 们 先 为 这 个 类 声明 @Directive 注 解 : 


@Directive({ 
selector: '[ngBookIf]', 


}) 


正如 前 面 所 说 ， 我 们 要 使 用 [ngBookIf] 作为 选择 器 。 这 是 因为 当 使 用 *kngBookIf= 
"condition" 时 ， 它 会 被 转换 成 : 

<template ngBookIf [ngBookIf]="condition"> 

由 于 ngBookIf 同 时 是 一 个 属性 ， 我 们 还 需要 指出 想 把 ngBookIf 作 为 输入 属性 进行 接收 。 

这 个 指令 要 做 的 是 : 当 条 件 为 真 时 ， 添 加 指令 模板 的 内 容 ; 否则 删除 。 

当 条 件 为 真 时 ， 我 们 就 会 使 用 视图 容器 (view container )。 视 图 容器 是 用 来 给 指令 附加 一 个 
或 多 个 视图 的 。 

视图 容器 可 以 用 来 : 
口 创建 一 个 新 视图 ， 柑 入 我 们 的 指令 模板 ; 
O 清空 视图 容 带 内 容 。 

在 使 用 它 之 前 , 需要 注入 ViewContainerRef 和 TemplateRef。 它们 会 注入 指令 的 视图 容器 和 
模板 。 

代码 如 下 所 示 。 


code/advanced_components/app/ts/templates/if.ts 


class NgBookIf { 
constructor(private viewContainer: ViewContainerRef, 
private template: TemplateRef«any») {} 
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有 了 视图 容器 和 模板 的 引用 ,我 们 就 可 以 写 TypeScript 的 属性 设置 器 ( setter ) 了 ,并 且 用 Input() 
注解 表明 它 是 输入 属性 。 


code/advanced components/app/ts/templates/if.ts 


@Input() set ngBookIf(condition) { 
if (condition) { 
this.viewContainer.createEmbeddedView(this.template); 


} 


else { 
this.viewContainer.clear(); 


] 
} 
每 当 设 置 类 的 ngBookIf 属 性 时 ， 这 个 方法 都 会 被 调用 。 也 就 是 说 ， 只 要 ngBookIf= 
"condition" 中 的 condition 发 生变 化 ， 就 会 调用 这 个 方法 。 
现在 ， 如 果 条 件 为 真 ， 就 使 用 视图 容器 的 createEmbeddedView 方 法 来 添加 指令 的 模板 ; 否 
则 使 用 clear 方 法 来 删除 视图 容器 中 的 所 有 内 容 。 
2. 使 用 ngBookIf 


要 想 使 用 这 个 指令 ， 可 以 编写 下 面 的 组 件 。 





























code/advanced components/app/ts/templates/if.ts 


@Component( { 
selector: 'template-sample-app', 
template: ` 
<button class="ui primary button" (click)="toggle()"> 
Toggle 
</button> 


«div *xngBookI f="display"> 
The message is displayed 
</div> 


}) 
export class IfTemplateSampleApp { 
display: boolean; 


constructor() { 
this.display = true; 
| cm 
toggle() { 
this.display - !this.display; 
j 
j 


运行 应 用 时 ， 可 以 看 到 指令 如 预期 的 一 样 工作 : 当 我 们 点 击 Toggle 按 钮 时 ， 会 在 页 面 中 切换 
显示 消息 This message is displayed。 
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14.6.2 #5 ngFor: ngBookRepeat 


现在 再 来 编写 一 个 简易 版 的 ngFor 指 令 ， 用 来 为 指定 的 











T 


合 反复 泻 染 模板 。 


1. ngBookRepeat 模 板 解构 


我 们 将 通 过 *ngBookRepeat="1let var of collection"? 语法 来 使 用 该 指令 。 
就 像 在 前 一 个 指令 中 所 做 的 那样 ， 我 们 需要 声明 选择 髓 [ngBookRepeat]。 不 过 ， 这 里 的 输 
人 参数 并 不 是 只 有 ngBookRepeat。 


如 果 回 头 看 一 下 Angular 是 如 何 转换 ksomething="let var in collection" 标 记 的 ， 就 会 发 
现 该 元 素 展开 后 的 最 终 形 态 等 价 于 : 


«template something [somethingOf]="collection" let-var="$implicit"> 

















«I-- ... ——> 
</template> 


如 前 所 见 ， 传 人 的 输入 
接收 并 迭代 的 集合 。 
























































对 于 生成 的 模板 ， 我 们 将 使 用 局 部 视图 变量 #var , 它 会 从 局 部 变 量 $implicit 接 收 值 。 
Angular 对 语法 糖 进行 展开 时 ， 会 将 一 个 局 部 变量 放 到 模板 中 。 这 个 局 部 变量 的 名 称 就 是 





$implicit, 




















2. ngBookRepeat HJ@Directive 


该 开始 编写 这 个 指令 了 。 


首先 来 写 指令 的 注解 。 





code/advanced_components/app/ts/templates/for.ts 


@Directive({ 


selector: '[ngBookRepeat] ' 


}) 
3. ngBookRepeat 3 
然后 编写 组 件 类 。 





code/advanced_components/app/ts/templates/for.ts 


class NgBookRepeat implements DoCheck { 


private items: any; 


private differ: IterableDiffer; 
private views: Map<any, ViewRef> = new Map<any, ViewRef>(); 


constructor(private viewContainer: ViewContainerRef, 
private template: TemplateRef<any>, 
private changeDetector: ChangeDetectorRef, 
private differs: IterableDiffers) {} 


我 们 为 类 声明 了 一 些 属性 : 





BEA AÉsomething, ， 而 是 somethingof。 它 的 值 就 是 我 们 的 指令 


要 


= 
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口 items 保 存 我 们 要 迭代 的 集合 ; 
口 differ 是 一 个 IterableDiffer 对 象 (已 经 在 14.5 节 学 过 )， 用 于 变更 检测 ; 


O views 是 一 个 Map ， 它 将 把 集合 中 给 出 的 条 目 和 包含 它 的 视图 链接 起 来 。 
构造 函数 会 接收 viewContainer 、 template 和 一 个 IterableDiffers 实 例 ( 全 部 参数 都 在 本 
章 的 前 面 讨论 过 )。 

接 下 来 要 做 的 就 是 注入 变更 检测 器 。 我 们 会 在 下 一 节 中 深入 讲解 变更 检测 器 ,现在 可 以 先 把 
它 理解 为 Angular 创 建 的 类 ， 用 来 在 指令 属性 发 生变 化 时 触发 检测 动作 。 
下 一 步 是 编写 设置 hgBookRepeat0f 属 性 时 要 触发 的 代码 。 
























































code/advanced components/app/ts/templates/for.ts 


GInput() set ngBookRepeatOf(items) { 


this.items - items; 
if (this.items && !this.differ) { 
this.differ - this.differs.find(items).create(this.changeDetector); 


} 


j 
当 设置 该 属性 时 ， 我 们 将 此 集合 保存 在 指令 的 item 属 性 中 。 如 果 集 合 是 有 效 的 并 且 还 没有 


differ 的 话 ， 就 创建 一 个 differ。 
要 做 到 这 一 点 , 我 们 创建 一 个 IterableDiffer 类 
经 在 构造 函数 中 注 和 人 过 了 )。 
接 下 来 就 要 编写 对 集合 的 变化 作出 响应 的 代码 了 。 为 此 ， 我 们 要 实现 下 面 的 ngDoCheck 方 法 
来 实现 Docheck 生 命 周 期 钩子 。 


code/advanced components/app/ts/templates/for.ts 





























al 











AY BI. EAT LAS AS AYE VC ae C 已 








ngDoCheck(): void { 
if (this.differ) { 
let changes = this.differ.diff(this.items); 


if (changes) { 


changes. forEachAddedItem((change) => { 

et view = this.viewContainer.createEmbeddedView(this.template, 
{'$implicit': change.item}); 

this.views.set(change.item, view); 

DE 

changes. forEachRemovedItem((change) => { 

et view = this.views.get(change.item); 

et idx = this.viewContainer.indexOf(view); 

this. viewContainer.remove(idx); 

this.views.delete(change. item); 


IDE 
} 
} 
} 








396 第 14 章 高 级 组 件 





我 们 来 分 解 一 下 这 上段 代码 。 在 这 个 方法 中 ,我们 做 的 第 一 件 事 就 是 确保 differ 已 经 实例 化 了 。 
如 果 没 有 ， 那 我 们 就 不 做 任何 事 。 

接 下 来 ， 询 问 differ 哪 些 东西 发 生 了 变化 。 如 果 有 变化 ， 就 用 changes . forEachAddedItem 方 
法 来 遍历 所 有 新 增 项 。 对 于 每 个 添加 进来 的 元 素 ， 该 回调 方法 将 接收 一 个 CollectionChange- 
Record 对 象 。 

对 于 每 个 元 素 ， 都 使 用 视图 容器 的 createEmbeddedView 方 法 来 创建 一 个 新 的 舰 人 视图 : 


let view = this.viewContainer.createEmbeddedView(this.template, {'$implicit': change.item}); 


createEmbeddedView 方 法 的 第 二 个 参数 是 视图 的 上 下 文 。 在 这 个 例子 中 ， 我 们 把 局 部 变量 
$implicit 设 置 为 change.item。 这 样 就 可 以 访问 视图 里 在 xngBookRepeat=" let var of 
collection" 中 声明 的 var 变量 了 了。 也 就 是 说 ，1let var 中 的 var 就 是 $implicit 变 量 。 使 用 
$implicit 是 因为 当 我 们 写 这 个 组 件 时 还 不 知道 用 户 会 给 它 起 什么 名 字 。 


最 后 ,我 们 要 把 集合 中 的 条 目 和 视图 关联 起 来 。 背后 的 原因 是 ,如 果 从 集合 中 删除 了 一 个 条 
目 ， 也 需要 删除 相应 的 视图 。 这 就 是 接 下 来 我 们 要 做 的 。 


对 于 从 集合 中 删除 的 每 一 个 条 目 , 我 们 都 要 根据 集合 条 目 到 视图 的 映射 找到 视 图 , 并 查询 该 
视图 在 视图 容器 中 的 索引 。 这 是 因为 视图 容器 的 remove 方 法 需要 一 个 索引 。 最 后 ,还 要 从 集合 条 
目 到 视图 的 映射 中 删除 这 个 视图 。 


4. 试用 这 个 指令 
要 测试 这 个 指令 ， 可 以 编写 如 下 组 件 。 






































































































































code/advanced_components/app/ts/templates/for.ts 


@Component ( { 
selector: 'template-sample-app', 
template: ^ 
«ul» 
«li xngBookRepeat-"let p of people"> 
{{ p.name jj is (( p.age }} 
«a href (click)="remove(p)">Remove</a> 
</li> 
</ul> 


«div class-"ui form"> 
«div class="fields"> 
«div class="field"> 
«label»Name«/label» 
«input type="text" «name placeholder="Name"> 
«/div» 
«div class="field"> 
«label»Age«/label» 
«input type="text" sage placeholder="Age"> 
«/div» 
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</div> 
</div> 
<div class="ui submit button" 
(click)="add(name, age)"> 
Add 
</div> 
}) 
export class ForTemplateSampleApp { 


people: any[]; 


constructor() { 

this.people = [ 
name: 'Joe', age: 10}, 
name: 'Patrick', age: 21}, 
{name: 'Melissa', age: 12}, 
name: 'Kate', age: 19} 





]; 
} 


remove(p) { 
let idx: number = this.people.indexOf(p); 
this.people.splice(idx, 1); 
return false; 


} 


add(name, age) { 
this.people.push({name: name.value, age: age.value}); 
name.value = ''; 


, 
wt 


age.value = A 
j 
j 


我 们 使 用 指令 来 遍历 人 员 列 表 。 


code/advanced_components/app/ts/templates/for.ts 


<ul> 
«li xngBookRepeat="let p of people"» 


(( p.name }} is (( p.age }} 
<a href (click)="remove(p)">Remove</a> 


</li> 
</ul> 


当 点 击 Remove 按 钮 时 ， 我 们 将 该 条 目 从 集合 中 删除 并 触发 变更 检测 。 
我 们 还 提供 了 一 个 表单 ， 可 以 用 它 向 集合 中 添加 条 目 。 


code/advanced_components/app/ts/templates/for.ts 














<div class-"ui form"» 
«div class="fields"> 
«div class="field"> 
«label»Name«/label» 
«input type="text" «name placeholder="Name"> 


398 第 14 章 高 级 组 件 





</div> 
<div class="field"> 
«label»Age«/label» 
«input type="text" sage placeholder="Age"> 
«/div» 
«/div» 
«/div» 


«div class="ui submit button" 
(click)="add(name, age)"» 
Add 
«/div» 


14.7 ”变更 检测 
在 用 户 与 我 们 的 应 用 交互 时 ， 数 据 (state) 会 发 生 改 变 ， 我们 的 应 用 需要 据 此 作出 响应 。 
任何 现代 JavaScript 框 架 都 需要 解决 的 一 大 问题 就 是 :怎样 才能 知道 发 生 了 变化 并 据 此 重新 泻 
染 组 件 ? 
为 了 证 视图 可 以 响应 组 件 状 态 的 变化 ，Angular 使 用 了 变更 检测 。 
什么 可 以 触发 组 件 状态 的 改变 ? 最 明显 的 就 是 用 户 交 互 。 比 如 ， 如 果 我 们 有 这 样 一 个 组 件 : 
@Component ( { 
selector: 'my-component', 
template: ^ 


Name: {{name}} 
«button (click)z"changeName( ) "»Change! «/button» 






































}) 


class MyComponent { 
name: string; 
constructor() { 
this.name = 'Felipe'; 


} 


changeName() { 
this.name = 'Nate'; 
} 
} 


可 以 看 到 ， 当 用 户 点 击 Change! 按 钮 时 ， 组 件 的 name 属 性 会 发 生 改 变 。 
另 一 个 变化 的 来 源 可 能 是 HITP 请 求 : 


@Component ( { 
selector: 'my-component', 
template: ^ 
Name: {{name}} 


























}) 


class MyComponent { 


14.7 交 更 检测 


399 





name: string; 
constructor(private http: Http) { 
this.http.get('/names/1') 
.map(res => res. json()) 
.subscribe(data => this.name = data.name); 
} 
} 


最 后 ， 我 们 还 可 以 用 计时 器 来 触发 变化 : 


@Component ( f 
selector: 'my-component', 
template: ^ 
Name: {{name}} 


}) 
class MyComponent { 
name: string; 
constructor() { 
setTimeout(() => this.name = 'Felipe', 2000); 
} 
} 


但 是 Angular 要 如 何 察觉 到 这 些 变化 呢 ? 


首先 要 知道 的 是 ， 每 个 组 件 都 有 自己 的 变更 检测 需 。 





就 像 我 们 之 前 看 到 的 ,一 个 典型 的 应 用 有 很 多 组 件 , 组 件 之 间 会 进行 交互 ， 从 而 创建 一 个 如 
图 14-32 所 示 的 依赖 关系 树 。 


= 
= c 
clt 
Lots 
muc | uw 


图 14-32 ”组 件 树 








对 于 树 中 的 每 个 组 件 , 都 会 创建 一 个 变更 检测 器 。 因此, 我 们 的 变更 检测 器 同样 是 一 棵 树 ( 如 
14-33 所 示 )。 
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| 变更 检测 器 
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| 变更 检测 器 


变更 检测 器 变更 检测 器 变更 检测 器 
变更 检测 器 | 变更 检测 器 


| 变更 检测 器 变更 检测 器 


图 14-33 ”变更 检测 器 树 









当 一 个 组 件 发 生变 更 时 , 无 论 它 在 树 的 什么 位 置 ， 都 会 触发 树 中 的 所 有 变更 检测 需 。 





为 Angular 会 从 顶部 节点 开始 ， 一 直 扫描 到 树 的 叶子 节点 〈 如 图 14-34 所 示 )。 


I 


Aah 


= BN 
— ER 


图 14-34 ”默认 的 变更 检测 方式 


























这 是 因 
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在 上 面 的 图 中 , 深 灰 色 的 组 件 发 生 了 变化 。 但 是 ,正如 我 们 所 见 ， 它 触发 了 整 棵 组 件 树 中 的 
检查 。 被 检查 的 组 件 用 浅 灰色 表示 《注意 ， 引 起 变化 的 组 件 本 身 也 被 检查 了 )。 
觉 上 , 你 可 能 会 认为 这 种 方式 的 开销 非常 大 ; 然而 实际 上 ， 由 于 经 过 大 量 的 优化 ( 这 使 得 
Angular 代 码 可 以 被 JavaScript 引 擎 进一步 优化 )， 它 的 速度 快 得 惊人 。 




















14.7.1 自 定 义 变更 检测 


有 时 ,默认 的 变更 检测 机 制 可 能 有 些 大 材 小 用 。 比 如 ,你 可 能 使 用 了 不 可 改变 对 象 或 者 应 用 
的 数据 架构 是 依赖 可 观察 对 象 的 。 在 这 些 场景 下 ，Angular 提 供 了 可 以 自 定义 变更 检测 系统 的 机 
制 ， 可 以 使 检测 变 得 非常 快 。 

修改 变更 检测 器 行为 的 第 一 种 方式 是 告诉 组 件 : 只 有 当 它 的 输入 属性 值 发 生 改 变 时 才 需 要 去 
检查 。 

简单 来 说 ， 输 入 属性 值 就 是 组 件 从 外 部 接收 的 属性 。 比 如 ， 在 这 段 代码 中 : 


class Person { 
constructor(public name: string, public age: string) {} 


} 





















































@Component({ 
selector: 'mycomp', 
template: ~ 
<div> 
«span class="name">{person.name} </span> 
is {person.age} years old. 
</div> 
}) 
class MyComp { 
GInput() person:Person; 


} 


我 们 有 一 个 输入 属性 person。 现在 , 如 果 只 想 在 输入 属性 发 生变 化 时 才 让 组 件 改 变 , 只 要 修 
改变 更 检测 策略 ， 把 changeDetection 设 置 成 ChangeDetectionStrategy .OnPush 就 可 以 了 。 





























e Jl 4$ —43€ , changeDetection Sk 3A 4€ ChangeDetectionStrategy .Default. 











我 们 写 两 个 组 件 来 做 个 小 实验 。 第 一 个 组 件 使 用 默认 的 变更 检测 行为 , 而 另外 一 个 组 件 使 用 Cc 
OnPush 策 略 。 


code/advanced_components/app/ts/change-detection/onpush.ts 


import { 
Component, 
Input, 
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ChangeDetectionStrategy, 
} from 'Gangular/core'; 


class Profile { 


constructor(private first: string, private last: string) {} 


lastChanged() { 
return new Date(); 
j 
} 





我 们 先导 入 一 些 东西 ， 然 后 声明 Person 类 。Person 类 会 作为 这 两 个 组 件 的 输入 属性 。 注 意 ， 
我 们 还 在 Profile 类 中 创建 了 一 个 lastChange( ) 方 法 。 这 个 方法 非常 有 用 ,可 以 决定 何 时 触发 变 
更 检测 。 当 把 一 个 给 定 的 组 件 标 记 为 需要 检查 时 ， 这 个 方法 就 会 被 调用 ， 然 后 呈现 在 模板 中 。 


此 ， 该 方法 可 以 准确 地 表明 组 件 的 最 后 检查 时 间 。 
接 下 来 ,我 们 声明 了 Defaultcmp 组 件 ， 它 将 使 用 








H 





b 


ASTER USE 


code/advanced_components/app/ts/change-detection/onpush.ts 


@Component ( { 
selector: 'default', 
template: ^ 


«h4 class="ui horizontal divider header"» 


Default Strategy 
«/h4» 


«form class-"ui form"» 

«div class="field"> 
<label>First Name</label> 
<input 

type="text" 

[(ngModel )]="profile. first" 

name="first" 

placeholder="First Name"» 
</div> 

<div class="field"> 

<label>Last Name</label> 
<input 
type="text" 
[(ngModel )]="profile.last" 
name="last" 
placeholder="Last Name"» 
</div> 
</form> 
<div> 


{{profile.lastChanged() | date: 'medium'}} 


</div> 


}) 
export class DefaultCmp { 
@Input() profile: Profile; 


} 
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第 二 个 组 件 使 用 onPush 策 略 。 


code/advanced_components/app/ts/change-detection/onpush.ts 





NU 


GComponent ( f 
selector: 'on-push', 
changeDetection: ChangeDetectionStrategy.OnPush, 
template: ^ 
«h4 class="ui horizontal divider header"» 
OnPush Strategy 
«/h4» 


«form class-"ui form"» 

«div class="field"> 
<label>First Name«/label» 
«input 

type="text" 

[(ngModel )]="profile. first" 

name="first" 

placeholder="First Name"> 
</div> 

«div class="field"> 
<label>Last Name</label> 
<input 

type="text" 
[(ngModel )]="profile. last" 
name="last" 
placeholder="Last Name"» 
</div> 
</form> 
<div> 

{{profile.lastChanged() | date: 'medium'}} 

</div> 


}) 


export class OnPushCmp { 
@Input() profile: Profile; 
} 


正如 我 们 所 见 ， 两 个 组 件 使 用 相同 的 模板 。 唯 一 不 同 的 就 是 注解 中 的 变更 检测 策略 。 
最 后 ， 我 们 添加 一 个 组 件 来 并 排 泻 染 两 个 组 件 。 


code/advanced_components/app/ts/change-detection/onpush.ts 























@Component ( f 
selector: 'change-detection-sample-app', 
template: 
«div class="ui page grid"» 
«div class="two column row"» 
«div class="column area"» 
«default [profile]="profile1"></default> 
«/div» 
«div class="column area"» 
«on-push [profile]-"profile2"»«/on-push» 
«/div» 
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</div> 
</div> 


}) 
export class OnPushChangeDetectionSampleApp { 


profilei: Profile = new Profile('Felipe', 'Coury'); 
profile2: Profile = new Profile('Nate', 'Murray'); 


} 
运行 这 个 应 用 时 ， 我 们 会 看 到 两 个 组 件 如 图 14-35 这 样 被 泻 染 出 来 。 
B Angular 2 - Change detec! x Felipe 





CŒ D localhost:56909 


ei Angular 2 Advanced Components 


Default Strategy OnPush Strategy 


First Name First Name 


Felipe Nate 
Last Name Last Name 
Murray 


Mar 20, 2016, 6:19:51 PM 


Coury 


Mar 20, 2016, 6:19:51 PM 


图 14-35 ”默认 策略 与 onPush 策 略 
当 我 们 更 改 左边 的 组 件 ( 使 用 默认 策略 ) 时 , 可 以 注意 到 右边 组 件 的 时 间 惟 并 没有 发 生 改 变 ， 
如 图 14-36 所 示 。 





@ OO / P angular 2- change detec: x 
ye 





> Œ D localhost:56909 





g.-- Angular 2 Advanced Components 


OnPush Strategv 


First Name First Name 


Ari 


Carlos| 


Last Name Last Name 


Taborda Lerner 


Mar 20, 2016, 6:37:19 PM Mar 20, 2016, 6:37:11 PM 


改变 这 个 组 件 人 t 
这 个 组 件 被 检查 了 
但 是 这 个 没有 


图 14-36 ”上 默认 的 组 件 变 化 时 ，onPush 的 组 件 不 会 检查 
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要 理解 为 何如 此 ， 我 们 来 检查 下 这 个 新 的 组 件 树 ( 如 图 14-37 所 示 )。 


ChangeDetectionSampleApp 





DefaultCmp OnPushCmp 


14-37 ”新 组 件 树 


Angular 对 于 变化 的 检查 是 自 上 而 下 的 ， 所 以 首先 查询 的 是 ChangeDetectionSampleApp， 然 
后 是 DefaultCcmp ， 最 后 是 onPushcmp 。 当 它 推测 出 onPushcmp 发 生变 化 时 ， 就 会 自 上 而 下 地 更 新 
组 件 树 中 的 所 有 组 件 ， 这 会 导致 重新 泻 染 DefaultCmp。 


当 我 们 改变 右边 组 件 的 值 时 ， 如 图 14-38 所 示 。 























@ O © / P angular 2- Change detec: x 





Felipe 





| € > Œ D bocalhost:56909 
| 





g.-- Angular 2 Advanced Components 


Default Strategy OnPush Strategy 
First Name 


Felipe 


Last Name 





Coury 


Mar 20, 2016, 6:25:27 PM 





Mar 20,2016 62527 PN] ^ 
: 改变 这 个 组 件 





两 个 值 都 发 生 了 改变 
—_—-— 





图 14-38 ”OnPush 的 组 件 变 化 时 ， 默 认 的 组 件 也 会 检查 
变更 检测 引擎 生效 后 ， 只 检查 了 pefaultcmp 组 件 而 没有 检查 onPushcmp 。 这 是 因为 当 我 们 为 
组 件 设置 了 OnPush 策 略 时 , 只 有 它 自 己 的 输入 发 生变 化 时 才 执 行 检测 。 改变 组 件 树 中 的 其 他 组 件 
时 并 不 会 触发 这 个 组 件 变 更 检测 器 。 





14.7.2 Zones 
在 底层 ，Angular 使 用 了 一 个 名 叫 Zones 的 类 库 ， 它 可 以 自动 检测 变化 并 触发 变更 检测 机 制 。 
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在 一 些 最 常见 的 情景 下 ，Zones 会 自动 告诉 Angular 发 生 了 某 些 变化 : 
O 当 DOM 事 件 发 生 时 ( 比如 click 、change 等 ); 

口 当 HTTP 请 求 完 成 时 ; 

O 当 定 时 器 被 触发 时 (setTimeout 或 setInterval )。 


然而 ， 还 有 一 些 场景 是 Zones 无 法 自动 识别 出 变化 的 。 在 这 些 场景 下 ，onPush 策 略 就 会 变 得 
非常 有 用 。 


下 面 是 一 些 Zones 无 法 掌控 的 例子 : 


口 使 用 异步 方式 运行 第 三 方 类 库 ; 
a 不 可 变 的 数据 ; 
Q 可 观察 对 象 。 























在 这 些 情况 下 , 非常 适合 通过 onPush 以 及 一 点 小 技巧 去 手动 提示 Angular 有 东西 发 生 了 变化 。 


14.7.3 ”可 观察 对 象 和 OnPush 
我 们 来 编写 一 个 组 件 , 它 接收 一 个 可 观察 对 象 作为 参数 。 每 当 从 这 个 可 观察 对 象 中 接收 到 值 
时 ， 我 们 就 会 增加 组 件 的 计数 器 属性 。 


如 果 使 用 常规 的 变更 检测 策略 ， 那 么 只 要 我 们 增加 计数 ，Angular 就 会 触发 变更 检测 。 然 而 ， 
个 组 件 将 使 用 onPush 策 略 ， 只 有 当 计 数 是 5 的 倍数 或 者 可 观察 对 象 完成 时 ， 我 们 才 让 变更 检测 
需 生 效 ， 而 不 是 每 次 增加 计数 时 都 触发 变更 检测 需 


要 做 到 这 一 点 ， 我 们 来 写 个 组 件 。 























code/advanced_components/app/ts/change-detection/observables.ts 
import { 

Component, 

Input, 

ChangeDetectorRef, 

ChangeDetectionStrategy 
} from 'Gangular/core'; 


import { Observable } from 'rxjs/Rx'; 


@Component ( { 
selector: 'observable', 
changeDetection: ChangeDetectionStrategy .OnPush, 
template: ^ 
«div» 


«div»Total items: {{counter}}</div> 
«/div» 


}) 


export class ObservableCmp { 
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@Input() items: Observable<number> ; 
counter = Q; 


constructor(private changeDetector: ChangeDetectorRef) { 


} 


ngOnInit() { 
this.items.subscribe((v) => { 
console.log('got value', v); 
this.counter++; 
if (this.counter % 5 == 0) { 
this.changeDetector .markForCheck( ) ; 
j 
}, 
null, 
Q = { 
this.changeDetector .markForCheck(); 
}); 
j 
j 


我 们 将 代码 分 解 来 看 ， 以 确保 理解 正确 。 首 先 ， 我 们 声明 该 组 件 接收 items 作 为 输入 属性 并 
使 用 onPush 作 为 变更 检测 策略 。 


code/advanced_components/app/ts/change-detection/observables.ts 

















@Component ( f 
selector: 'observable', 
changeDetection: ChangeDetectionStrategy.OnPush, 
template: ^ 
«div» 
«div»Total items: {{counter}}</div> 
</div> 


}) 
接 下 来 ， 我 们 把 输入 属性 存储 在 组 件 类 的 items 属 性 中 ， 然 后 设置 另 一 个 属性 counter 为 6。 











code/advanced_components/app/ts/change-detection/observables.ts 


export class ObservableCmp { 
@Input() items: Observable<number> ; 
counter = Q; 


然后 ， 我 们 使 用 构造 函数 来 取得 组 件 的 变更 检测 需 。 


code/advanced_components/app/ts/change-detection/observables.ts 





constructor(private changeDetector: ChangeDetectorRef) { 


j 
Wa, CHESTER, fEngonInitfA T rPül P rz 


code/advanced components/app/ts/change-detection/observables.ts 
ngOnInit() ( 
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this.items.subscribe((v) => { 
console.log('got value', v); 
this.counter++; 
if (this.counter % 5 == 0) { 
this.changeDetector .markForCheck(); 
} 
}, 


null, 
Q = { 
this.changeDetector .markForCheck( ) ; 
}); 
} 
我 们 订阅 了 可 观察 对 象 。subscribe 方 法 接收 三 个 回调 函数 : onNext , onError 和 


onCompleted. 


onNext 回调 函数 会 打印 出 我 们 得 到 的 值 ， 然 后 增加 计数 。 最 后 ， 如 果 当 前 计数 需 的 值 是 5 的 
倍数 ， 我 们 就 调用 变更 检测 器 的 markForcheck 方 法 。 只 要 我 们 想 告 诉 Angular 已 经 发 生 了 变化 ， 
就 可 以 使 用 这 个 方法 ， 从 而 使 变更 检测 恬 生 效 。 


对 于 onError 回 调 函 数 ， 我 们 传人 了 nul1。 这 表示 我 们 不 想 处 理 这 个 场景 。 


最 后 ， 对 于 oncomplete 回 调 函数 ， 我 们 同样 触发 了 变更 检测 器 ， 所 以 最 终 的 计数 器 可 以 被 
显示 出 来 。 


现在 来 看 应 用 组 件 的 代码 。 它 会 创建 订阅 者 。 











code/advanced components/app/ts/change-detection/observables.ts 


@Component ( { 
selector: 'change-detection-sample-app', 
template: ^ 
«observable [items]-"itemObservable"»«/observable» 


}) 
export class ObservableChangeDetectionSampleApp { 
itemObservable: Observable<number> ; 


constructor() { 


this.itemObservable = Observable.timer(100, 100).take(101); 
j 
} 


面 这 行 代 码 很 重要 : 
this.itemObservable = Observable.timer(100, 100).take(101); 
这 一 行 创建 了 一 个 Ü "s 察 对 象 ， 我 们 会 通过 items 输 入 属性 将 这 个 可 观察 对 象 传递 进 组 件 。 


timer 方 法 有 两 个 参数 : 第 一 个 是 等 待 的 毫秒 数 ， 第 二 个 是 间隔 的 毫秒 数 。 因 此 ， 这 个 可 观察 对 
象 会 创建 一 系列 的 值 。 























148 84 409 





因为 我 们 不 需要 一 直 创 建 下 去 ， 所 以 使 用 了 take 函 数 ， 只 获取 前 101 个 值 。 
当 我 们 运行 这 段 代码 时 ， 会 发 现 每 取 到 5 个 值 才 会 更 新 一 次 计数 器 ， 并 且 生 成 了 一 个 最 终 值 
101 (如 图 14-39 所 示 )。 





@ 0 O / E Angular 2- Change detec: x \ à | Felipe | 
€ > Q [D localhost:8080 wl 三 | 





: a Angular 2 Advanced Components 


Total items: 101 





[x à] Elements Console Sources Network Timeline Profiles Resources Security » @1A2 PW 
© Ww top 了 Preserve log 
got value 97 app.ts:28 
got value 98 app.ts:28 
got value 99 app.ts:28 
got value 100 app.ts:28 








| 
图 14-39 手动 触发 变更 检测 


14.8 总 结 

Angular 为 我 们 提供 了 许多 可 以 用 来 编写 高 级 组 件 的 工具 。 使 用 本 章 的 这 些 技术 ， 你 几乎 能 
写 出 任何 想 要 的 组 件 功能 。 

然而 ， 在 高 级 组 件 中 还 有 一 个 重要 的 概念 ， 那 就 是 依赖 注入 。 


使 用 依赖 注入 ， 我 们 可 以 让 组 件 和 系统 中 的 很 多 其 他 部 分 挂 接 起 来 。 第 8 章 详 细 讨论 了 什么 
是 依赖 注入， 如 何在 应 用 中 使 用 它 ， 以 及 注入 服务 的 常用 模式 。 








测试 























经 过 夜以继日 的 奋战 , 终于 熬 到 可 以 对 外 发 布 的 日 子 了 。 是 时 候 让 过 去 投入 的 大 量 精力 和 时 
间 得 到 回报 了 。 然 而 ， 传 来 的 一 个 消息 犹如 睛 天 霹雳 : 一 个 致命 的 bug 导 致 用 户 无 法 注册 。 


15.1 测试 驱动 ? 





测试 能 够 防 患 于 未 然 ， 提 升 对 程序 的 信心 , 也 可 以 为 新 加 入 的 开发 人 员 提 供 指引 。 在 软件 开 
发 领域 ， 几 乎 没 人 质疑 测试 的 作用 。 但 是 ， 人 们 在 如 何 测试 这 个 问题 上 一 直 争 论 不 休 。 





一 种 方法 是 先 写 测 试 ， 再 写实 现 过 程 ， 直 至 测试 通过 ; 














另 一 种 是 已 有 实现 代码 ， 再 写 测试 ， 


验证 代码 是 否 正确 。 令 人 不 解 的 是 ， 二 者 的 合理 性 常 在 开发 社区 中 引发 口水 战 。 双 方 候 持 不 下 ， 








争论 哪个 才 是 正确 的 方法 。 





基于 以 往 的 经 验 , 尤其 是 在 严重 依赖 原型 的 情况 下 ,我 们 将 重点 放 在 构建 可 测试 代码 上 。 我 
们 发 现 ,即使 你 的 经 历 有 所 不 同 , 但 是 在 构建 原型 时 , 测试 可 能 经 常 变更 的 代码 片断 会 比 让 它 运 








c 


行 起 来 耗费 2~3 倍 的 工作 量 。 与 此 相反 ， 我 们 在 构建 基于 小 








型 组 件 的 应 用 程序 时 ， 将 大 量 功能 分 


解 成 不 同 的 方法 ， 从 而 测试 整个 蓝图 的 部 分 功能 。 这 就 是 我 们 所 说 的 可 测试 代码 。 


o 一 种 替代 构建 原型 (后 测试 ) 的 方法 论 便 是 所 谓 的 “红色 一 绿色 一 重 构 ”?，。 它 
的 理念 是 要 求 你 先 写 测试 。 运 行 测试 会 得 到 失败 结果 (红色 )， 因 为 你 还 没有 


写 任何 实现 的 代码 。 只 有 在 测试 失败 之 后 ， 才 
过 (绿色) 


去 写实 现代 码 ， 直 至 所 有 测试 通 


当然 ， 测 试 什么 取决 于 你 和 你 的 团队 ， 而 本 章 的 重点 在 于 讨论 如 何 测试 程序 。 





(D Red-Green-Refactor， 是 一 种 标准 的 测试 驱动 开发 流程 。 一 一 译 者 注 
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15.2 ” 端 对 端 测试 与 单元 测试 
测试 程序 有 两 种 主要 方法 : 端 对 端 测试 和 单元 测试 


如 果 使 用 自 上 而 下 的 方法 进行 测试 ,那么 写 测试 时 就 将 程序 视 为 一 个 “ 黑 盒 ”。 与 程序 交互 
2 ec EN KEEN S IET A 


x] 35 M a2 

















在 Angular 中 ， 最 常用 的 工具 叫 作 Protractor 。Protractor 能 够 打开 浏览 器 与 程序 
交互 ， 收 集 测试 结果 ， 并 检验 测试 结果 与 预期 值 是 否 相 符 。 





第 二 种 常用 的 测试 方法 是 隔离 程序 的 每 个 部 件 , 在 隔离 环境 中 运行 测试 。 这 种 测试 形式 叫 作 
单元 测试 。 

在 单元 测试 中 ， 所 写 的 测试 需要 事先 提供 既定 的 输入 值 与 相应 的 逻辑 单元 ， 检 测 输出 结果 ， 
确定 它 是 否 与 我 们 的 预期 结果 匹配 。 


在 本 章 中 ， 我 们 将 会 探讨 如 何 对 Angular 程 序 进行 单元 测试 。 








15.3 测试 工具 
为 了 测试 程序 ， 我 们 将 用 到 两 种 工具 : Jasmine 和 Karma。 








15.3.1 Jasmine 

Jasmine” 是 一 种 用 于 测试 JavaScript 代 码 的 行为 驱动 框架 。 

利用 Jasmine， 你 可 以 设置 代码 在 调用 后 的 预期 结 

比如 ， 我 们 假定 calculator 对 象 有 一 个 sum 函 数 。 想 确保 1 加 1 的 结果 为 2， 就 可 以 用 一 个 测 
试 ( 也 叫 规格 ，spec ) 来 表达 。 使 用 以 下 代码 : 


describe('Calculator', () => { 
it('sums 1 and 1 to 2', () = { 
var calc = new Calculator(); 
expect(calc.sum(1, 1)).toEqual(2); 
Ip 
D); 


使 用 Jasmine 的 一 个 优点 是 代码 易于 阅读 。 从 以 上 代码 可 以 看 到 ， 我 们 期 望 calc ,sum 的 结果 an 


























(D https://angular.github.io/protractor/#/ 
© http://jasmine. github.io/2.4/introduction.html 
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等 于 2。 

测试 通常 由 多 个 describe 块 和 it 块 组 成 。 

通常 , 我 们 用 describe 来 组 织 要 测试 的 逻辑 单元 , 对 于 其 内 部 每 个 要 使 用 断言 的 预期 都 会 用 
到 一 个 it 块 。 然 而 ， 这 并 不 是 一 个 人 硬性 规定 。 你 会 经 常 看 到 一 个 it 块 包含 多 个 预期 。 

在 上 述 calculator 示 例 中 ， 我们 只 是 列举 了 一 个 简单 的 对 象 。 正 因为 如 此 ， 整 个 类 只 使 用 
了 一 个 describe 块 ， 而 每 个 方法 使 用 一 个 it 块 。 

大 多 数 情 况 下 并 非 如 此 。 比 如 ， 某 些 方法 会 根据 不 同 输入 值 产生 不 同 结果 , 那么 这 些 方法 可 
以 拥有 多 个 相应 的 让 块 。 在 这 种 情况 下 ， 最 好 使 用 和 能 套 的 describe 块 : 对 象 级 别 用 一 个 ， 每 个 
方法 也 各 用 一 个 ， 然 后 在 其 内 部 的 每 个 断言 语句 用 一 个 单独 的 it 块 包 衰 。 

大 量 有 关 describe 块 和 it 块 的 示例 将 贯穿 本 章 。 不 必 烦 恼 到 底 该 用 describe 块 还 是 it 块 ， 
我 们 将 用 大 量 示例 演示 说 明 。 

更 多 有 关 Jasmine 和 其 语法 的 资料 ， 参 见 Jasmine 官 方 文档 : http://jasmine.github.io/2.4/ 


introduction.html。 



























































15.3.2 Karma 

使 用 Jasmine， 我 们 可 以 描述 测试 和 预期 结果 。 要 运行 测试 ， 还 需要 为 测试 提供 一 个 浏览 器 
环境 。 

Karma 应 运 而 生 。 使 用 Karma, 我 们 可 以 在 Chrome 或 Firefox 之 类 的 真实 浏览 器 或 者 PhantomJS 
这 样 的 空 过 浏览 器 (无 用 户 界面 ) 内 运行 JavaScript 代 码 。 











15.4 ”编写 单元 测试 
本 节 的 重点 是 理解 如 何 对 一 个 Angular 程 序 的 各 个 部 件 进行 单元 测试 。 


我 们 将 会 学 习 如 何 测试 服务 、 组 件 、HTTP 请 求 等 。 同 时 ,我 们 也 会 收获 一 些小 技巧 ， 让 代 
码 更 容易 测试 。 





15.5 Angular 单元 测试 框架 


Angular 自 身 提供 了 一 套 基 于 Jasmine 框 架 的 辅助 类 ， 用 以 帮助 我 们 编写 单元 测试 。 


主要 的 测试 框架 位 于 @angular/core/testing 包 中 。( 然而 ,为 了 测试 组 件 ， 我们 会 用 到 
@angular/compiler/testing 包 和 @angular/platform-browser/testing 包 中 的 些 辅 助 类 , 稍 
后 具体 介绍 。) 












































15.6 ”测试 前 准备 413 





A 如 果 这 是 你 初次 测试 Angular 程 序 , 那么 在 为 Angular 写 单元 测试 时 , 需要 先 完 成 


15.6 


一 些 必 要 的 设置 步骤 。 

例如 ， 在 需要 注入 依赖 时 ， 我 们 经 常 手 动 配置 它们 。 在 测试 一 个 组 件 时 ， 需 要 
使 用 测试 辅助 类 初始 化 它们 。 在 测试 路 由 时 ， 还 需要 构建 一 些 依赖 。 
设置 有 些 繁 珊 ， 但 不 用 太 担 心 。 一 旦 掌握 ， 你 就 会 发 现 从 一 个 项 目 切换 到 另外 
一 个 项 目 ， 配 置 不 会 有 多 大 变化 。 另 外 ， EEA RE 

和 往常 一 样 ， 可 以 在 代码 下 载 页 面 获 取 本 章 所 有 的 源 代 码 。 用 你 喜欢 的 编辑 器 
直接 打开 浏览 ， 可 以 对 本 章 涵盖 的 细节 有 一 个 大 体 的 把 握 。 我 们 建议 你 坚持 参 
照 代 码 来 阅读 本 章 。 


测试 前 准备 








我 们 在 第 7 章 创 建 了 一 个 用 于 搜索 音乐 的 应 用 。 本 章 开 始 为 这 个 程序 编写 测试 。 
Karma 需 要 一 个 配置 文件 才能 运行 。 因 此 配置 Karma 的 第 一 步 就 是 创建 一 个 karma.confjs 文 件 。 
将 karma.confjs 放 在 项 目的 根 目 录 下 ， 如 下 所 示 。 











code/routes/music/karma.conf.js 


// Karma configuration 
var path = require('path'); 
var cwd = process.cwd(); 


module.exports = function(config) { 
config.set({ 


sor 


// base path that will be used to resolve all patterns (eg. files, exclude) 
basePath: '', 
// frameworks to use 

// available frameworks: https://npmjs.org/browse/keyword/karma-adapter 
frameworks: ['jasmine'], 


// list of files / patterns to load in the browser 
files: [ 

{ pattern: 'test.bundle.js', watched: false } 
], 


// list of files to exclude 
exclude: [ 


], 


// preprocess matching files before serving them to the browser 
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocesN 


preprocessors: { 
'test.bundle.js': ['webpack', 'sourcemap'] 
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}, 


webpack: { 
devtool: 'inline-source-map', 
resolve: { 
root: [path.resolve(cwd)], 
modulesDirectories: ['node modules', 'app', 'app/ts', 'test', '.'], 
extensions: ['', '.ts', '.js', '.css'], 
alias: { 


module: { 
loaders: [ 
{ test: /\.ts$/, loader: 'ts-loader', exclude: [/node_modules/] } 
] 
h, 
stats: { 
colors: true, 
reasons: true 


}, 
watch: true, 
debug: true 


)s 


webpackServer: { 
noInfo: true 


}, 


// test results reporter to use 


// possible values: 'dots', 'progress' 
// available reporters: https://npmjs.org/browse/keyword/karma-reporter 
reporters: ['spec'], 


// web server port 
port: 9876, 


// enable / disable colors in the output (reporters and logs) 
colors: true, 


// level of logging 

// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WAR\ 
N || config.LOG_INFO || config.LOG_DEBUG 

logLevel: config.LOG_INFO, 


// enable / disable watching file and executing tests whenever any file chan\ 
ges 
autoWatch: true, 
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// start these browsers 

// available browser launchers: https://npmjs.org/browse/keyword/karma-launcN 
her 

browsers: ['Chrome'], 


// Continuous Integration mode 
// if true, Karma captures browsers, runs the tests and exits 
singleRun: false 


}) 
} 


先 别 急于 和 弄 清 这 个 文件 的 内 容 ， 而 是 记 住 以 下 几 点 : 

O 将 PhantomJS 设 置 成 目标 测试 浏览 器 ; 

口 使 用 Jasmine karma 框 架 进行 测试 ; 

口 使 用 一 个 名 为 test.bundle.js 的 webpack bundle 文 件 包 庄 所 有 的 测试 和 程序 代码 。 


下 一 步 ， 新 建 一 个 名 为 test 的 文件 夹 ， 用 于 存放 测试 文件 : 


mkdir test 








15.7 ”测试 服务 类 和 HTTP 
服务 类 在 Angular 程 序 中 常 以 普通 类 的 形式 出 现 。 在 某 种 意义 上 说 ， 这 简化 了 测试 ， 因 为 有 
时 可 以 在 不 需要 Angular 的 情况 下 直接 进行 测试 。 


配置 好 Karma ， 就 可 以 开始 测试 spotifyService 类 了 。 如 果 记 得 没 错 ， 这 个 服务 类 通过 与 
Spotify API 交 互 读 取 专 辑 、 曲 目 和 艺术 家 相关 信息 。 


切换 到 test 文 件 来， 新建 一 个 service 子 文件 夹 ， 用 于 存放 即将 开始 的 服务 类 测试 。 一 切 准 备 
就 绪 ， 开 始 创建 第 一 个 服务 类 测试 文件 ， 名 为 SpotifyService.spec.ts。 


下 面 开始 组 织 这 个 测试 文件 。 首 先 需 要 从 @angular/core/testing 包 中 导入 几 个 辅助 类 。 


















































code/routes/music/test/services/SpotifyService.spec.ts 


import { 

inject, 

fakeAsync, 

tick, 

TestBed 

from '@angular/core/testing'; 


接 下 来 ， 还 需要 导入 其 他 几 个 类 。 


code/routes/music/test/services/SpotifyService.spec.ts 


we 





import {MockBackend} from '@angular/http/testing'; 
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import { 
Http, 
ConnectionBackend, 
BaseRequestOptions, 
Response, 
ResponseOptions 

} from '@angular/http'; 


既然 我 们 的 服务 用 到 了 HTTP 请 求 , 就 需要 从 eangular/http/testing 包 中 导 和 人 MockBackend。 
有 了 这 个 类 ， 就 可 以 设置 预期 值 和 验证 HTTP 请 求 结果 了 。 


最 后 ， 导 入 我 们 要 测试 目标 类 。 





























code/routes/music/test/services/SpotifyService.spec.ts 
import {SpotifyService} from '../../app/ts/services/SpotifyService'; 


15.7.1 HTTP 要 点 




















马上 要 编写 测试 了 , 但 是 在 每 个 测试 的 运行 过 程 中 都 要 访问 Spotify 服 务 器 。 这 显然 有 些 不 妥 ， 
原因 如 下 。 


(1) HTTP 请 求 相对 比较 慢 ,， 而 且 随 着 测试 套件 的 体积 越 来 越 大 ， 可 以 预见 运行 全 部 测试 需要 
的 时 间 也 会 越 来 越 长 。 

(2) Spotify 的 API 调 用 设置 了 阔 值 限制 , 如 果 不 停 地 运行 测试 ,会 很 快 耗 尽 所 有 的 API 调 用 资源 。 

(3) 如 果 处 于 离线 状态 、Spotify 骨 省 或 无 法 访问 ， 那 么 测试 也 会 失败 ， 即 使 代码 在 技术 角度 
上 没有 问题 也 是 一 样 。 

这 在 写 单 元 测试 时 给 了 我 们 一 个 提示 : 在 运行 测试 前 ， 必 须 隔 离 那些 无 法 掌控 的 东西 。 


在 我 们 例子 中 ， 对 应 的 就 是 Spotify 服 务 。 解 决 方法 是 ， 用 一 个 替身 替换 掉 HTTP 请 求 ， 而 且 
这 个 替身 不 需要 访问 真实 的 Spotify 服 务 器 。 


在 测试 领域 ， 这 个 过 程 被 称 为 模拟 依赖 ， 也 时 也 叫 作 擅 装 依赖 。 






























































Q, 阅读 文章 “模拟 不 是 伪装 ”http:/martinfowler.comyarticles/mocksArentStubs.html ) 
可 以 了 解 更 多 有 关 模 拟 和 伪装 之 间 的 差异 。 
假设 我 们 正在 写 的 测试 依赖 于 某 个 Car 类 。 


它 有 几 个 方法 : 你 可 以 调用 start 来 启动 一 个 car 实例 , 也 可 以 调用 汽车 的 其 他 方法 , 如 stop 
(IFE), park (JH ) 和 getSpeed ( 读 取 车 速 )。 


下 面 介 绍 如 何 使 用 伪装 和 模拟 来 写 依赖 于 这 个 类 的 测试 。 
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15.7.2 伪装 


伪装 是 即时 创建 的 对 象 ， 它 包含 所 依赖 对 象 所 有 行为 的 一 个 子 集 。 
下 面 写 一 个 测试 与 start 方 法 交互 。 
为 Car 即 时 创建 一 个 伪装 并 将 它 注入 到 要 测试 的 类 中 : 


describe('Speedtrap', function() { 
it('tickets a car at more than 60mph', function() { 
var stubCar = { getSpeed: function() { return 61; } ); 
var speedTrap = new SpeedTrap(stubCar); 
speedTrap.ticketCount = 0; 
SpeedTrap.checkSpeed( ) ; 
expect(speedTrap.ticketCount).toEqual(1); 
ID 
}); 


这 是 使 用 伪装 的 一 个 典型 场景 。 我 们 可 能 仅仅 在 某 个 测试 内 部 使 用 它 。 





























15.7.3 ”模拟 

在 我 们 的 例子 中 ,模拟 是 对 象 更 完整 的 体现 , 它 会 重 写 依赖 的 部 分 或 全 部 行为 。 在 大 部 分 情 
况 下 ， 模 拟 可 以 在 一 个 测试 套件 的 多 个 测试 间 反 复 使 用 。 

它们 有 时 用 于 断言 方法 是 否 按 预 期 的 方式 调用 。 

一 个 模拟 版 本 的 car 类 可 能 是 这 样 的 : 


class MockCar { 
startCallCount: number = 0; 


























start() { 
this.startCallCount++; 
} 
} 


它 可 以 用 在 另外 一 个 测试 中 ， 如 : 


describe('CarRemote', function() { 
it('starts the car when the start key is held', function() { 
var car - new MockCar(); 
var remote - new CarRemote(); 
remote.holdButton('start'); 
expect(car.startCallCount).toEqual(1); 
P; 
D); 


模拟 和 伪装 的 最 大 区 别 在 于 : 
O 伪装 提供 手动 重 写 行为 功能 的 一 个 子 集 ; 
口 模拟 通常 预 设 期 望 值 ， 验 证 调用 某 些 方法 的 返回 结果 。 








TE 
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15.7.4 Http MockBackend 

既然 现在 心里 有 底 了 ， 就 继续 编写 之 前 的 服务 类 测试 代码 。 

每 次 运行 测试 时 都 与 在 线 的 Spotify 服 务 进行 交互 显然 不 是 个 好 主意 。 幸 运 的 是 Angular 提 供 
了 一 种 方法 ， 使 用 MockBackend 来 伪装 HTTP 调 用 。 

可 以 将 这 个 类 注入 到 一 个 Http 实 例 中 ， 这 样 我 们 就 能 按照 自己 的 意图 对 HTTP 交 互 行为 进行 
操控 了 。 可 以 使 用 不 同 的 方法 进行 干预 和 断言 : 手动 设置 响应 ,模拟 HTTP 错 误 ， 添 加 更 多 预期 
( 比如 判断 请 求 的 URL 是 否 与 预期 值 匹配 ， 请 求 参数 是 否 正确 ， 等 等 )。 

因此 这 里 的 想法 就 是 使 用 一 个 伪 HTTP 库 。 这 个 伪 HTTP 看 起 来 和 真实 的 HTTP 库 一 样 : 所 有 
方法 一 一 匹配 ， 可 以 返回 响应 结果 ， 等 等 。 然 而 ， 我 们 却 不 会 真正 发 出 一 条 请 求 。 

有 实 上 ， 除 了 伪造 请 求 外 ，MockBackend 还 允许 我 们 设置 期 望 结果 ， 监 控 我 们 的 预期 行为 。 
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15.7.5 TestBed.configureTestingModule 和 提供 者 


当 测 试 Angular 程 序 时 ， 需 要 确保 配置 顶级 NgModule ， 后 面 会 在 这 个 测试 中 用 到 它 。 在 进行 
配置 时 ， 我 们 要 配置 提供 者 、 声 明 组 件 并 导入 其 他 模块 : 就 像 你 平常 使 用 NgModule 一 样 〈 参 见 
8.1075 )。 

测试 Angular 代 码 时 ， 我 们 有 时 采取 手动 设置 注入 的 方式 。 这 样 做 的 好 处 是 能 够 对 测试 进行 
更 多 的 操控 。 

所 以 在 测试 Http 请 求 时 , 我 们 不 会 注入 一 个 “真实 ”的 Http 类 ,取而代之 的 是 注入 一 个 看 起 
来 像 Http 的 替身 ， 但 它 可 以 真实 地 拦截 请 求 ， 返 回 我 们 事先 配置 的 响应 。 

为 了 做 到 这 一 点 ， 要 创建 一 个 Http 变 体 ， 其 内 部 使 用 MockBackend。 

方法 是 ， TEbeforeEach 44 T- fii HTestBed. configureTestingModule. 这 个 钩子 接收 一 个 
回调 函数 ， 它 会 在 每 个 测试 运行 之 前 被 调用 。 这 为 替换 类 的 具体 实现 提供 了 一 个 难得 的 机 会 。 















































code/routes/music/test/services/SpotifyService.spec.ts 


describe('SpotifyService', () => { 
beforeEach(() => { 
TestBed.configureTestingModule( { 
providers: [ 

BaseRequestOptions, 

MockBackend, 

SpotifyService, 

{ provide: Http, 

useFactory: (backend: ConnectionBackend, 
defaultOptions: BaseRequestOptions) => { 
return new Http(backend, defaultOptions); 

}, deps: [MockBackend, BaseRequestOptions] }, 
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] 
}); 
DP 


注意 TestBed.confi gureTestingModule 的 providers 参数 可 以 接收 提供 者 数组 ， 用 于 测试 
TEA hF o 


BaseRequestOptions 和 SpotifyService 是 那些 类 的 默认 实现 。 最 后 一 个 提供 者 有 点 复杂 。 








code/routes/music/test/services/SpotifyService.spec.ts 


{ provide: Http, 
useFactory: (backend: ConnectionBackend, 
defaultOptions: BaseRequestOptions) => { 
return new Http(backend, defaultOptions); 
}, deps: [MockBackend, BaseRequestOptions] }, 
] 


这 段 代 码 使 用 了 provide 和 useFactory 人 参数 来 创建 一 个 Http 类 变 体 ,使 用 了 工厂 模式 (也 就 
是 useFactory 的 职责 所 在 )。 

这 个 工厂 的 方法 签名 需要 接收 一 个 ConnectionBackend 实 例 和 一 个 BaseRequestOption 实 
例 。 这 个 对 象 的 第 二 个 参数 是 deps: [MockBackend, BaseRequestOptions] o 这 表示 MockBackend 
是 工厂 的 第 一 个 参数 ，BaseRequestOptions ( 默认 实现 ) 为 第 二 个 参数 。 

最 后 ， 返 回 一 个 MockBackend 作 为 函数 结果 的 定制 Http 类 。 

这 样 做 有 什么 好 处 呢 ? 在 测试 代码 中 每 次 需要 注入 Http 的 地 方 ， 得 到 的 都 是 我 们 改装 过 的 
Http 实 例 。 

我 们 会 在 大 量 测试 中 使 用 这 个 行 之 有 效 的 方法 : 用 依赖 注入 的 方法 定制 依赖 , 隔离 需要 测试 
的 功能 。 





























15.7.6 ”测试 getTrack 方法 
下 面 针 对 这 个 服务 类 写 一 个 测试 ， 验 证 我 们 正在 调用 正确 的 URL。 





Q, 如 果 你 还 没 看 过 第 7 章 的 音乐 程序 ， 可 以 在 7.10.5 节 找到 源 代码 。 


现在 开始 测试 getTrack 方 法 。 


code/routes/music/app/ts/services/SpotifyService.ts 


getTrack(id: string): Observable«any[]» { 
return this.query(^/tracks/$([id)^); 
j 
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你 可 能 还 记得 这 个 方法 的 细节 ， 它 调用 了 query 方 法 ， 从 而 分 析 接 收 的 参数 并 拼接 成 URL。 


code/routes/music/app/ts/services/SpotifyService.ts 


query(URL: string, params?: Array«string»): Observable«any[]» { 
let queryURL: string = ^$(SpotifyService.BASE URLJ$(URL)'; 
if (params) ( 
queryURL = ~${queryURL}?${params. join('&')}*; 
} 


return this.http.request(queryURL).map((res: any) => res.json()); 
} 


请 求 /tracks/${fid} 意 味 着 假设 当 调 用 getTrack('TRACK_ID' ) 方 法 时 ， 期 望 返 回 的 URL 是 
https://api.spotify.com/v1/tracks/TRACK_ID. 


可 以 这 样 写 这 个 测试 : 


describe('getTrack', () => { 
it('retrieves using the track ID', 
inject([SpotifyService, MockBackend], fakeAsync((spotifyService, mockBackend) => { 
var res; 
mockBackend.connections.subscribe(c => { 
expect(c.request.url).toBe('https://api.spotify.com/vi/tracks/TRACK_ID'); 
let response = new ResponseOptions({body: '{"name": "felipe"}'}); 
c.mockRespond(new Response(response) ) ; 
}); 
spotifyService.getTrack('TRACK_ID').subscribe((_res) => { 
res = _res; 
D3 
tick(); 
expect(res.name).toBe('felipe'); 
})) 
)? 
D); 


初 看 有 点 难以 理解 ， 下 面 一 一 讲解 。 
当 测试 有 依赖 时 ， 使 用 Angular 注 入 器 提供 那些 类 的 实例 。 如 下 所 示 : 


inject([Classi, ..., ClassN], (instance1, ..., instanceN) => { 
. testing code ... 








}) 

当 测 试 返 回 的 是 一 个 承诺 或 者 RxJS 的 可 观察 对 象 时 ， 可 以 使 用 fakeAsync 辅 助 工 具 来 测试 那 
些 代码 ( 像 测试 同步 代码 那样 )。 在 调用 tick() 后 ， 承 诺 立 即 生效 ， 可 观察 对 象 也 会 马上 接收 到 
通 o 


如 下 列 代码 所 示 : 


inject( [SpotifyService, MockBackend], fakeAsync((spotifyService, mockBackend) => { 



































pu 
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首先 要 读 取 两 个 变量 : spotifyService 和 mockBackend。 前 者 是 一 个 特定 的 SpotifyService 
实例 ， 后 者 是 一 个 MockBackend 实 例 。 注 意 内 部 函数 (spotifyService, mockBackend ) 的 参数 是 
注入 的 ， 相应 的 类 型 在 inject 函 数 第 一 个 参数 的 数组 中 (SpotifyService 和 MockBackend ) 指定 。 

其 次 运行 位 于 fakeAsync 内 部 的 代码 。 这 就 意味 着 当 调 用 tick( ) 时 ,异步 代码 会 以 同步 方式 
运行 。 

测试 的 运行 环境 已 经 准备 就 绪 ， 现 在 可 以 写 “真正 ”的 测试 代码 了 。 首 先 声明 一 个 res 变 量 ， 
存放 HTTP 调 用 响应 结果 。 然 后 ， 订 阅 mockBackend.connections 事 件 : 


var res; 
mockBackend.connections.subscribe(c => { ... }); 


简单 地 说 ， 每 当 mockBackend 上 产生 一 个 新 的 连接 ， 我 们 都 希望 收 到 通知 ( 例如， 调用 了 这 
个 函数 )。 

为 了 验证 SpotifyService 根 据 指 定 的 TRACK_ID 调 用 了 正确 的 URL， 可 以 指定 预期 结果 为 我 
们 预 设 的 URL。 首 先 通 过 c .request .ur1 得 到 URL 值 ， 然 后 设置 期 望 结果 : c.request.ur1 的 值 
应 该 是 字符 串 'https://api.spoti fy.com/v1/tracks/TRACK_ID' : 



























































expect(c.request.url).toBe( https://api.spotify.com/v1/tracks/TRACK ID'); 
运行 测试 。 如 果 请 求 URL 不 匹配 ， 则 测试 失败 。 


现在 我 们 已 经 收 到 了 请 求 ,并 证 明了 它 是 正确 的 。 现 在 需要 打造 一 个 响应 。 为 此 ， 新建 一 个 
ResponseOptions Xfi], FEE ISON FFE { "name": "felipe"} 为 响应 内 容 。 








let response = new ResponseOptions({body: '{"name": "felipe"}'}); 


最 后 , 将 连接 的 响应 替换 成 一 个 Response 对 象 , 它 包 里 了 刚刚 创建 的 ResponseOptions 实 例 。 


c.mockRespond(new Response(response) ) ; 


Q, 注意 ，subscribe 中 的 回调 函数 可 以 复杂 到 任何 你 想 要 的 程度 ， 可 以 包含 基于 
URL 的 条 件 逻 辑 、 查 询 参数 或 者 任何 可 以 从 请 求 对 象 中 读 取 的 信息 。 
这 样 一 来 ， 我 们 就 可 以 为 可 能 遇 到 的 每 个 场景 编写 测试 了 。 








现在 已 经 准备 好 了 使 用 TRACK_ID 人 参数 来 调用 getTrack 方 法 , 并 且 可 以 通过 res 变 量 跟踪 响应 
结果 : 


spotifyService.getTrack('TRACK_ID').subscribe((_res) => { 
res = _res; 


5; 


如 果 此 时 中 断 测试 ， 在 触发 回调 函数 前 会 一 直 等 等 HTTP 请 求 发 送 和 响应 结果 返回 。 也 有 可 
能 产生 其 他 执行 路 径 ， 我 们 不 得 不 重新 组 织 代 码 对 任务 进行 同步 。 幸 好 fakeAsync 可 以 解决 这 个 
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可 题 。 方 法 是 调用 tick()， 蜡 步 代码 会 立即 执行 ， 就 像 变 魔术 一 样 : 


* 


tick(); 


执行 最 后 一 步 检验 ， 确 保 设 置 的 响应 结果 和 接收 到 的 相同 : 


expect(res.name).toBe('felipe'); 


细 想 一 下 , 这 个 服务 类 的 所 有 方法 的 代码 都 非常 类 似 。 将 设置 URL 预 期 值 的 代码 片断 抽取 出 
放 到 一 个 名 为 expectedURL 的 函数 中 。 


code/routes/music/test/services/SpotifyService.spec.ts 








function expectURL(backend: MockBackend, url: string) { 
backend.connections.subscribe(c => { 
expect(c.request.url).toBe(url); 
let response = new ResponseOptions({body: '{"name": "felipe"}'}); 
c.mockRespond(new Response(response)); 
D; 
j 


Jk IAE, AT Ae Hh ggetArtistfllgetAlbum7r i2; ii 55 WK 


code/routes/music/test/services/SpotifyService.spec.ts 


describe('getArtist', ()  ( 
it('retrieves using the artist ID', 
inject([SpotifyService, MockBackend], fakeAsync((svc, backend) => { 
var res; 
expectURL(backend, 'https://api.spotify.com/vi/artists/ARTIST ID'); 
svc.getArtist('ARTIST ID').subscribe(( res) => { 
res - res; 

p 
tick(); 
expect(res.name).toBe('felipe'); 


})) 

















); 
FS 


describe('getAlbum', () => { 
it('retrieves using the album ID', 
inject([SpotifyService, MockBackend], fakeAsync((svc, backend) => { 
var res; 
expectURL(backend, 'https://api.spotify.com/v1/albums/ALBUM ID'); 
svc.getAlbum('ALBUM ID').subscribe(( res) => { 
res - res; 
2); 
tick(); 
expect(res.name).toBe('felipe'); 
})) 
); 
D; 


searchTrack 方 法 稍 有 不 同 : 它 不 直接 调用 query ， 而 是 使 用 search 方 法 替代 。 
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code/routes/music/app/ts/services/SpotifyService.ts 


searchTrack(query: string): Observable<any[]> { 
return this.search(query, 'track'); 


} 
search 接 着 调用 query ， 将 /search 作 为 第 一 个 参数 并 将 一 个 包含 q=<query> 和 type=track 
的 数组 作为 第 二 个 参数 。 


code/routes/music/app/ts/services/SpotifyService.ts 





search(query: string, type: string): Observable«any[]» { 
return this.query(^/search', | 
`q=${query}`, 
`type=${type}` 
1); 
j 


最 后 ，query 将 参数 转换 成 带 有 QueryString 的 URL 路 径 。 我 们 期 待 调用 的 URL 是 以 
/search?q=&type=track 结 尾 的 。 


综合 所 学 知识 ， 为 searchTrack 方 法 编写 测试 。 








code/routes/music/test/services/SpotifyService.spec.ts 


describe('searchTrack', () => { 
it('searches type and term', 
inject([SpotifyService, MockBackend], fakeAsync((svc, backend) => { 
var res; 
expectURL(backend, 'https://api.spotify.com/v1/search?q-TERM&type-track'N 


Svc.searchTrack("TERM").subscribe(( res) => { 


res = res; 
}); 

tick(); 
expect(res.name).toBe('felipe'); 


2) 
Ji 
5; 
这 个 测试 与 之 前 写 过 的 测试 异曲同工 。 下 面 一 起 回顾 这 个 测试 的 内 容 : 
口 植 人 AHTTP 生 命 周 期 ， 在 HTTP 连 接 初始 化 时 添加 回调 ; 

a 为 当前 连接 设置 预期 URL， 包 含 查询 类 型 和 搜索 关键 字 ; 

口 调用 测试 方法 searchTrack; 

口 通知 Angular 完 成 所 有 等 待 的 异步 调用 
口 断言 预期 响应 结果 。 


简 而 言 之 ,测试 服务 类 时 要 做 的 是 : 
(1) 使 用 伪装 或 模拟 来 隔离 全 部 依赖 ; 




















we 
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(2) 在 异步 调用 的 情况 下 ， 使 用 fakeAsync 和 tick 确 保 它们 的 完成 ; 
(3) 调用 要 测试 的 服务 类 ; 

(4) 断言 方法 返回 值 与 预期 值 匹配 。 
下 面 把 注意 力 转向 那些 消费 服务 的 类 : 组 件 。 




















15.8 测试 组 件 间 的 路 由 
测试 组 件 时 ， 可 以 使 用 下 列 两 种 策略 之 一 : 
(1) 编写 测试 从 外 部 与 组 件 进行 交互 ， 传 递 属性 值 ， 检 验 标签 生成 结 
(2) 测试 各 个 组 件 方法 及 其 输出 结 
这 两 种 测试 策略 分 别称 为 黑金 测试 和 白金 测试 。 本 节 将 演示 如 何 混合 使 用 它们 。 


首先 为 相对 简单 的 一 个 组 件 Artistcomponent 类 编写 测试 。 第 一 部 分 测试 将 测试 组 件 的 内 部 
结构 ， 所 以 它 属 于 白 盒 测试 。 


在 开始 之 前 ， 先 回 顾 一 下 ArtistComponent 的 内 容 : 
在 类 的 构造 函数 上 ， 首 先 从 routeParams 集 合 中 读 取 id。 












































code/routes/music/app/ts/components/ArtistComponent.ts 


constructor(private route: ActivatedRoute, private spotify: SpotifyService, 
private location: Location) { 
route.params.subscribe(params => { this.id = params['id']; }); 


} 
很 快 ,我 们 遇 到 了 第 一 个 绊脚石 :在 没有 运行 状态 路 由 需 的 情况 下 ,如 何 获取 当前 路 由 的 ID? 











15.8.1 为 测试 创建 路 由 器 
在 Angular 中 写 测试 时 ， 我 们 手动 配置 了 大 量 注 入 的 类 。 路 由 ( 和 测试 组 件 ) 也 包含 大 量 需 
要 注入 的 依赖 。 尽 管 如 此 ， 一 旦 配置 好 了 ， 它 就 很 少 变更 而 且 简 单 易 用 。 


写 测试 时 ,使 用 beforeEach 和 TestBed.configureTestingModule 设 置 可 注入 的 依赖 是 很 方 
便 的 。 在 测试 Artistcomponent 的 时 候 ， 将 定义 一 个 函数 来 创建 和 配置 这 个 测试 的 路 由 。 









































code/routes/music/test/components/ArtistComponent.spec.ts 
describe('ArtistComponent', () => { 
beforeEach(() => { 
configureMusicTests(); 


5; 
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在 辅助 类 文件 MusicTestHelpers.ts 中 定义 方法 configureMusicTests。 一 起 来 看 看 。 
这 仅仅 是 configureMusicTests 的 实现 代码 。 不 用 担心 ， 下 面 将 逐一 解释 。 








code/routes/music/test/MusicTestHelpers.ts 


export function configureMusicTests() { 
const mockSpotifyService: MockSpotifyService = new MockSpotifyService(); 





TestBed.configureTestingModule( { 
imports: [ 
{ // TODO RouterTestingModule.withRoutes coming soon 
ngModule: RouterTestingModule, 
providers: [provideRoutes(routerConfig) ] 


TestModule 
], 
providers: [ 

mockSpotifyService.getProviders(), 


provide: ActivatedRoute, 
useFactory: (r: Router) -» r.routerState.root, deps: [ Router ] 





I 
} 


首先 创建 一 个 MockSpotifyService 实 例 ， 用 来 模拟 真实 的 Spoti fyService 实 现 。 


接 下 来 ， 使 用 一 个 名 为 TestBed 的 类 ， 并 调用 其 方法 configureTestingModule。 TestBed 是 


Angular 内 置 的 一 个 辅助 类 库 ， 帮 助 我 们 简化 测试 。 














本 例 中 ，TestBed.configureTestingModule 的 作用 是 为 测试 配置 NgModule。 你 可 以 看 到 我 





们 提供 了 一 个 NgModule 配 置 作为 参数 ， 它 包含 : 


QO) imports 





QO) providers 


TEimports'P, FA: 











Helpers.ts )。 
TEproviders 中 提供 了 


C] MockSpotifyService (通过 mockSpotifyService.getProviders() ) 
口 ActivatedRoute 


我 们 以 Router 为 人 口 ， 进 一 步 学 习 。 





QO) RouterTestingModule, 并 用 routerCconfig 进 行 配 置 一 -这样 能 够 为 测试 配置 路 由 需 ; 
O TestModule ， 这 个 NgModule 声 明了 所 有 将 要 测试 的 组 件 ( 具体 细节 参见 MusicTest- 
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1. Router 











至 今 尚 未 提 及 的 是 测试 时 要 用 到 哪些 路 由 。 对 此 有 多 种 方法 实现 ,首先 看 一 下 我 们 要 用 的 方式 。 














code/routes/music/test/MusicTestHelpers.ts 
@Component ( { 
selector: 'blank-cmp', 


template: ^^ 
}) 


export class BlankCmp { 


} 


@Component ( { 
selector: 'root-cmp', 
template: ^«router-outlet»«/router-outlet»^ 


}) 


export class RootCmp { 


} 


export const routerConfig: Routes = [ 
{ path: '', component: BlankCmp } 
path: 'search', component: SearchComponent } 


{ 
{ 
{ 
{ 
ls 
这 里 并 不 ( 像 真实 路 由 器 配置 的 那样 ) 跳 转 到 一 





, 


path: 'artists/:id', component: ArtistComponent }, 
path: 'tracks/:id', component: TrackComponent }, 
path: 'albums/:id', component: AlbumComponent } 








个 空 的 URL， 而 是 使 用 一 个 BlankCmp 蔡 代 。 





当然 ， 如 果 你 坚持 像 顶 层 应 用 那样 使 用 RouterConfig ， 那 么 要 先 在 其 他 地 方 使 用 export 导 


出 ， 并 在 此 处 使 用 import 导 入 。 























如 果 遇 到 更 复杂 的 场景 ， 必 须 针 对 多 种 不 同 的 路 由 配置 进行 测试 ， 那 么 可 以 在 musicTest- 
Providers 冰 数 中 接收 一 个 参数 ， 从 而 每 次 运行 测试 都 使 用 一 个 新 的 路 由 器 配置 。 


面临 太 多 的 选择 , 你 必须 挑选 一 种 最 适合 自己 团队 的 方式 。 在 路 由 是 相对 静态 的 并 且 一 个 配 











置 可 以 服务 于 所 有 测试 的 情况 下 ， 这 个 配置 相当 棒 。 





























现在 所 有 依赖 都 已 经 解决 , 可 以 通过 new Router 创 建 一 个 新 的 路 由 器 , 并 调用 其 r .initial- 


Navigation() 方 法 。 


2. ActivatedRoute 











ActivatedRoute 服 务 跟踪 “当前 路 由 ”。 它 需要 
FEA o 


3. MockSpotifyService 











巴 Router 作 为 依赖 ， 并 把 它 加 入 到 deps 来 进 


之 前 通过 模拟 HTTP 库 测试 了 SpotifyService。 这 里 我 们 将 会 模拟 整个 服务 类 。 一 起 来 看 看 

















如 何 模拟 这 个 类 ， 或 者 说 任何 服务 。 
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15.8.2 ”模拟 依赖 
在 music/test 目 录 下 ， 找 到 mocks/spotify.ts 文 件 ， 内 容 如 下 。 


code/routes/music/test/mocks/spotify.ts 


import {SpyObject} from './helper'; 
import {SpotifyService} from '../../app/ts/services/SpotifyService'; 


export class MockSpotifyService extends SpyObject { 
getAlbumSpy; 
getArtistSpy; 
getTrackSpy; 
searchTrackSpy; 
mockObservable; 
fakeResponse; 


iX Hi p BHMockSpoti fyServiceH 4$ 25, 它 是 真实 Spoti fyService 的 一 个 模拟 版 本 。 这 些 实 
例 变量 会 被 作为 探 子 〈spy ) 使 用 。 





15.83 TRF 
探 子 是 一 种 比较 特别 的 模拟 对 象 ， 有 两 个 好 处 : 
(1) 可 以 模拟 返回 值 ; 
(2) 可 以 计算 方法 调用 次 数 和 调用 的 参数 值 。 
要 在 Angular 测 试 中 使 用 探 子 , 可 以 使 用 一 个 内 部 类 Spyobject 实 现 (用 于 Angular 内 部 测试 )。 
正如 我 们 的 代码 所 示 ， 你 可 以 即时 创建 一 个 新 Spyobject 或 者 让 模拟 类 继承 SpyObject 。 


继承 或 直接 使 用 这 个 类 的 好 处 在 于 , 它 提供 一 个 spy 方 法 。spy 方 法 允许 你 覆盖 某 个 方法 并 强 
制 返回 值 (以 及 监控 ， 确保 方法 被 调用 )。 下 面 的 代码 对 类 构造 函数 使 用 spy。 


code/routes/music/test/mocks/spotify.ts 
































constructor() { 
super(SpotifyService); 


this.fakeResponse - null; 

this.getAlbumSpy - this.spy('getAlbum').andReturn(this); 
this.getArtistSpy - this.spy('getArtist').andReturn(this); 
this.getTrackSpy - this.spy('getTrack').andReturn(this); 


this.searchTrackSpy - this.spy('searchTrack').andReturn(this); 
j 


构造 函数 的 第 一 行 调用 了 Spy0bject 构 造 函 数 ,传递 要 模拟 的 特定 类 。 调 用 super(... ) 是 可 
选 的 ,但 模拟 时 类 会 继承 所 有 特定 类 的 方法 ， 因 此 你 只 需要 覆盖 要 测试 的 方法 。 














O 如 果 你 想 知 道 SpyObject 是 如 何 实现 的 ， 请 查看 angular/angular 项 目下 的 文件 
/modules/angular2/src/testing/testing internal.ts ( https://github.com/angular/angular/ 
blob/bO0cebd-ba6b651e9e7eb5bf801ea42dc7c4a7f25/modules/angular2/src/testing/ 
testing internal.ts #L205 ). 

调用 super 之 后 ， 将 fakeResponse 的 值 初 始 化 为 null1 ， 我 们 稍 后 会 用 到 它 。 

接 下 来 用 探 子 蔡 换 特 定 类 的 方法 。 编 写 测试 时 使 用 一 个 引用 更 容易 设置 预期 值 和 模拟 响应 结果 。 

在 ArtistComponent 中 使 用 SpotifyService 时 ， 真 实 的 getArtist 方 法 返回 一 个 可 观察 对 

象 。 在 组 件 中 调用 的 方法 是 subscribe 方 法 。 


code/routes/music/app/ts/components/ArtistComponent.ts 












































ngOnInit(): void { 
this.spotify 
.getArtist(this.id) 
.subscribe((res: any) => this.renderArtist(res)); 


} 
然而 在 模拟 类 中 , 我 们 会 采取 一 个 小 技巧 : getArtist 并 不 返回 可 观察 对 象 , 而 是 返回 this， 
也 就 是 MockSpotifyService 自 身 。 这 就 意味 着 上 面 this.spotify.getArtist(this.id) 的 返回 
值 是 MockSpoti fyService。 
不 过 这 样 有 一 个 问题 : ArtistComponent 将 会 调用 可 观察 对 象 的 subscribe 方 法 。 考 虑 到 这 
一 点 ， 可 以 在 MockSpoti fyService 中 定义 一 个 subscribe 方 法 。 














code/routes/music/test/mocks/spotify.ts 


subscribe(callback) { 
callback(this. fakeResponse); 


} 
现在 在 模拟 对 象 上 调用 subscribe 方 法 ,会 立即 调用 这 个 回调 函数 ， 异 步 方法 会 同步 执行 。 
男 外 注意 ， 我 们 使 用 this. fakeResponse 来 调用 这 个 回调 函数 。 它 将 我 们 引 向 男 一 个 方法 。 





code/routes/music/test/mocks/spotify.ts 


setResponse( json: any): void { 
this. fakeResponse = json; 


} 
AAIE A BR EARS HS ETE, 取而代之 的 是 使 用 一 个 辅助 方法 ,允许 测试 代码 
设置 既定 的 响应 结果 ( 可 能 来 源 于 特定 的 服务 )， 并 利用 它 模拟 不 同 的 响应 。 






































code/routes/music/test/mocks/spotify.ts 


getProviders(): Array<any> { 
return [{ provide: SpotifyService, useValue: this }]; 


} 
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最 后 一 个 方法 是 辅助 方法 ， 用 在 TestBed.confi gureTestingModule 的 providers 参数 上 。 
它 和 稍 后 回 过 头 来 写 组 件 测试 时 看 到 的 类 似 。 


下 面 是 MockSpotifyService 的 完整 代码 。 





code/routes/music/test/mocks/spotify.ts 


import {SpyObject} from './helper'; 
import {SpotifyService} from '../../app/ts/services/SpotifyService'; 


export class MockSpotifyService extends SpyObject { 
getAlbumSpy; 
getArtistSpy; 
getTrackSpy; 
searchTrackSpy; 
mockObservable; 
fakeResponse; 


constructor() { 
super(SpotifyService); 


this.fakeResponse - null; 

this.getAlbumSpy - this.spy('getAlbum').andReturn(this); 
this.getArtistSpy - this.spy('getArtist').andReturn(this); 
this.getTrackSpy - this.spy('getTrack').andReturn(this); 
this.searchTrackSpy - this.spy('searchTrack').andReturn(this); 


j 


subscribe(callback) { 
callback(this.fakeResponse); 
} 


setResponse( json: any): void { 
this.fakeResponse = json; 


} 


getProviders(): Array<any> { 
return [{ provide: SpotifyService, useValue: this }]; 
j 
j 


15.9 回 到 测试 代码 


万 事 俱 备 ， 只 从 东风 。 现 在 可 以 为 ArtistComponent 编 写 测试 代码 了 。 
首先 是 导入 语句 。 























code/routes/music/test/components/ArtistComponent.spec.ts 
import { 

inject, 

fakeAsync, 
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} from '@angular/core/testing'; 
import { Router } from '@angular/router'; 
import { Location } from '@angular/common' ; 
import { MockSpotifyService } from '../mocks/spotify'; 
import { SpotifyService } from '../../app/ts/services/SpotifyService' ; 
import { 
advance, 
createRoot, 
RootCmp, 
configureMusicTests 
} from '../MusicTestHelpers'; 


接 下 来 使 用 confi gureMusicTests 描述 测试 ， 确 保 所 有 测试 用 例 都 可 以 访问 musicTestProviders。 








code/routes/music/test/components/ArtistComponent.spec.ts 


describe('ArtistComponent', () => { 
beforeEach(() => { 
configureMusicTests(); 


5; 
然后 写 一 个 测试 来 验证 组 件 初 始 化 的 细节 。 首先 , 回顾 一 下 ArtistComponent 的 初始 化 过 程 。 








code/routes/music/app/ts/components/ArtistComponent.ts 


export class ArtistComponent implements OnInit { 
id: string; 
artist: Object; 


constructor(private route: ActivatedRoute, private spotify: SpotifyService, 
private location: Location) { 
route.params.subscribe(params => { this.id = params['id']; }); 


} 


ngOnInit(): void { 
this.spotify 
.getArtist(this.id) 
.subscribe((res: any) => this.renderArtist(res)); 


} 
请 记 住 , 创建 组 件 时 , 使 用 route.params 接 收 当时 路 由 的 ig 参 数 , 并 将 它 存储 在 类 的 id 属 性 中 。 
当 组 件 初始 化 时 , ngonInit 方 法 被 Angular 触 发 ( 因为 此 组 件 实现 了 onInit 接 口 ) 然后 针对 
接收 到 的 id 使 用 SpotifyService 读 取 相 应 的 艺术 家 。 当 获取 艺术 家 数据 后 , 调用 renderArtist， 
传递 艺术 家 数据 。 
这 里 一 个 重要 的 理念 就 是 使 用 依赖 注入 来 获取 SpotifyService ， 但 是 要 记得 ， 我 们 之 前 已 
经 创建 了 一 个 MockSpotifyService。 
为 了 测试 这 一 行为 ， 执 行 以 下 步 又: 
(1) 使 用 路 由 导向 到 ArtistCcomponent ， 组 件 会 进行 初始 化 ; 
































15.9” 回 到 测试 代码 431 





(2) 验证 MockSpotifyService 在 ArtistComponent 中 已 经 被 注入 , 根据 相应 的 id 读 取 艺 术 家 数据 。 
下 面 是 完整 的 测试 代码 。 


code/routes/music/test/components/ArtistComponent.spec.ts 





describe('initialization', () => { 
it('retrieves the artist', fakeAsync( 
inject([Router, SpotifyService], 
(router: Router, 
mockSpotifyService: MockSpotifyService) => { 
const fixture = createRoot(router, RootCmp); 


router .navigateByUrl('/artists/2'); 
advance( fixture); 


expect(mockSpotifyService.getArtistSpy).toHaveBeenCalledWith('2'); 


20»; 
DP 


接 下 来 一 步 步 进行 解释 。 





15.9.1 fakeAsync 和 advance 


首先 用 fakeAsync 包 衷 测 试 。 有 了 fakeAsync ， 我 们 就 能 够 在 状态 检测 和 异步 操作 发 生 时 进 
行 更 多 的 控制 , 并 且 不 需要 深入 其 内 部 细节 。 这 样 做 的 结果 是 ,我 们 在 测试 中 做 了 变更 ,必须 显 
式 地 通知 组 件 检测 变更 结果 。 

一 般 来 说 ， 开 发 程序 时 不 必 担 心 这 个 问题 ， 这 是 Zones 应 该 做 的 事 。 但 在 整个 测试 过 程 中 ， 


我 们 可 以 更 细致 地 对 状态 变化 的 检测 进行 操作 。 
向 下 跳 过 几 行 ， 可 以 看 到 调用 了 MusicTestHelpers 中 的 advance 函 数 。 一 起 看 看 这 个 函数 。 












































code/routes/music/test/MusicTestHelpers.ts 


export function advance( fixture: ComponentFixture«any»): void { 
tick(); 
fixture.detectChanges(); 

j 


advance PR [Bt T PY PFE : 

(1) 通知 组 件 检 测 状态 变更 ; 

(2) 调用 tick()。 

使 用 fakeAsync 时 ， 计 时 器 是 同步 的 。 我 们 使 用 kick( ) 来 模拟 异步 流逝 的 时 间 。 


实际 上 , 在 我 们 的 测试 中 ， 任何 需要 Angular 大 显 身手 的 时 候 都 可 以 调用 advance 因数 。 例 如 ， 
如 果 要 导向 到 新 的 路 由 ， 更 新 一 个 表单 元 素 ， 发 出 一 个 HTTP 请 求 等 ， 我 们 都 可 以 调用 adqvance 
函数 给 Angular 制 造 机 会 大 显 神通 。 
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15.9.2 inject 
在 测试 中 需要 添加 一 些 依赖 。 使 用 inject 可 以 做 到 这 一 点 。inject 接 收 两 个 参数 : 
(1) 一 个 等 待 注 入 的 令 牌 数组 
(2) 一 个 提供 了 注入 的 函数 
inject 会 使 用 哪些 类 ? 提供 者 通过 TestBed.configureTestingModule 的 providers 来 定义 。 


^: 


























T 


注意 ， 这 里 要 注 











(1) Router 
(2) SpotifyService 
要 注入 的 Router 类 就 是 上 面 musicTestProviders 中 配置 的 Router。 


对 于 SpotifyService ， 注意 请 求 注入 Spoti fyService 时 ， 得 到 的 是 MockSpotifyService。 
FEKA AHE, BET HBA ERER AEE 























15.9.3 测试 ArtistComponent 组 件 初始 化 
一 起 回顾 一 下 测试 代码 的 内 容 。 


code/routes/music/test/components/ArtistComponent.spec.ts 


const fixture = createRoot(router, RootCmp); 


router .navigateByUrl('/artists/2'); 
advance( fixture); 


expect (mockSpoti fyService.getArtistSpy ).toHaveBeenCalledWith('2'); 
FRA Mii createRoot fl #2—RootCmp Li], — HEA AcreateRoot Hi HJ] RA. 


code/routes/music/test/MusicTestHelpers.ts 





export function createRoot(router: Router, 
componentType: any): ComponentFixture<any> { 
const f = TestBed.createComponent(componentType) ; 
advance(f); 
(<any>router).initialNavigation(); 
advance(f); 
return f; 


} 

注意 ， 这 时 调用 createRoot 可 以 : 
(1) 创建 一 个 根 组 件 实例 ; 

(2) 对 其 进行 advance 处 理 ; 
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(3) 通知 路 由 器 设置 initialNavigation; 

(4) 再 次 进行 aqvance 处 理 ; 

(5) 返回 全 新 的 根 组 件 。 

测试 依赖 路 由 器 的 组 件 时 需要 不 少 准备 工作 ， 有 这 个 辅助 函数 可 以 方便 不 少 。 


注意 我 们 再 次 使 用 了 TestBed 类 库 来 调用 TestBed .createComponent 方 法 。 这 个 方法 创建 了 
一 个 相应 类 型 的 组 件 。 





















































Q, RootCmp 是 我 们 在 MusicTestHelpers 中 创建 的 一 个 空 组 件 。 其 实 完 全 没 必要 为 
根 组 件 创建 一 个 空 组 件 。 这 里 这 样 做 是 因为 能 够 或 多 或 少 在 隔离 环境 中 测试 子 
组 件 (ArtistComponent )。 这 样 一 来 ， 就 不 必 担 心 对 上 层 应 用 组 件 的 影响 了 。 
但 是 ， 也 许 你 想 要 确保 子 组 件 在 上 下 文 环境 中 正确 运行 。 在 这 种 情况 下 ， 你 可 

能 想 使 用 应 用 程序 常规 的 父 组件 ， 而 非 RootCmp。 


接 下 来 探讨 使 用 router 转向 URL /artists/2 LJ J£ advance 。 当 我 们 定位 到 该 URL 时 ， 
Arti stComponent 应 该 会 进行 初始 化 ， 因 此 可 以 汤 定 调用 Spoti fyService 的 getArt ist 方 法 时 返 
回 了 正确 的 值 。 





15.9.4 测试 ArtistComponent 方法 


回想 一 下 ，ArtistComponent 中 有 一 个 href 调 用 了 back() 方 法 。 


code/routes/music/app/ts/components/ArtistComponent.ts 
back(): void { 
this. location.back(); 


j 
下 面 来 测试 ， 当 调用 back 方 法 时 ， 路 由 需 会 将 用 户 重 定向 回 之 前 的 位 置 。 


当前 位 置 状态 由 Location 服 务 控制 。 当 需要 将 用 户 返 回 原来 的 位 置 时 ， 我 们 使 用 Location 
的 back 方 法 。 


这 里 演示 如 何 测 试 back 方 法 。 














code/routes/music/test/components/ArtistComponent.spec.ts 
describe('back', () => { 
it('returns to the previous location', fakeAsync( 
inject([Router, Location], 
(router: Router, location: Location) => { 
const fixture = createRoot(router, RootCmp); 
expect(location.path()).toEqual('/'); 


router.navigateByUrl('/artists/2'); 
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advance( fixture); 
expect(location.path()).toEqual('/artists/2'); 


const artist - fixture.debugElement.children[1].componentInstance; 
artist.back(); 


advance( fixture); 


expect(location.path()).toEqual('/'); 
0); 
}); 


初始 结构 与 之 类 似 : 注入 依赖 并 创建 一 个 新 的 组 件 。 
加 入 一 个 新 的 expect 语 句 ， 断 定 1ocation.path() 与 预期 结果 一 致 。 


这 里 提供 一 种 新 思路 : 当 访 问 ArtistComponent 的 方法 时 ， 通 过 fixture.debugElement . 
children[1].componentI nstance 这 一 行 得 到 ArtistComponent 实 例 的 一 个 引用 。 


有 了 组 件 实 例 ， 就 可 以 直接 调用 其 方法 了 ， 如 back( ) 。 
调用 了 back 方 法 后 ， 进 行 adqvance 处 理 ， 然 后 验证 location.path() 是 否 与 预期 一 致 。 
































15.9.5 测试 ArtistComponent DOM 模板 值 
最 后 要 测试 ArtistComponent 的 一 部 分 就 是 生成 艺术 家 模板 。 








code/routes/music/app/ts/components/ArtistComponent.ts 


template: ^ 
«div xngIf-"artist"» 
<ht>{{ artist.name }}</h1> 


<p> 
<img src="{{ artist.images[0].url }}"> 
</p> 


<p><a href (click)="back()">Back</a></p> 
</div> 

















记 住 ， 实 例 变量 artist xESpotifyService Z&getArtist 7; iX 的 调用 结果 。 既 然 用 Mock- 
SpotifyService $R fUSpotifyService ， 那 么 模板 中 使 用 的 数据 无 论 如 何 都 应 该 是 mock- 
SpotifyService 的 返回 结果 。 下 面 一 起 看 看 如 何 实现 。 


code/routes/music/test/components/ArtistComponent.spec.ts 











describe('renderArtist', () => { 
it('renders album info', fakeAsync( 
inject([Router, SpotifyService], 
(router: Router, 
mockSpotifyService: MockSpotifyService) => { 
const fixture = createRoot(router, RootCmp); 
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let artist = (name: 'ARTIST NAME', images: [{url: 'IMAGE_1'}]}; 
mockSpoti fyService.setResponse(artist); 


router .navigateByUrl('/artists/2'); 
advance( fixture); 


const compiled = fixture.debugElement.nativeElement; 


expect(compiled.querySelector('h1').innerHTML).toContain('ARTIST NAME' ); 
expect(compiled.querySelector('img').src).toContain('IMAGE_1'); 


20»; 
195 


这 里 比较 陌生 的 是 通过 mockSpotifyService 的 setResponse 方 法 手动 设置 返回 结果 。 


artist 变 量 是 一 个 测试 工具 夹 ， 代 表 调 用 artists 终 端 即 使 用 GET 方 法 请 求 https://api. 
spotify.com/v1/artists/{id} 时 从 Spotify API 返 回 的 结果 。 


真实 的 JSON 数 据 看 起 来 如 图 15-1 所 示 。 




















+ Builder Ga LJ p> 2 


History Collections  mpsj/apispotityco.. Noenvironment v 9) 


G As 


> 





G Spotify API 
14 Janat 252pm 。 Orequests a = 
Authorization Headers (0) Pre-request script Tests «m (5. 


Add requests to this collection and 
create folders to organize them No Auth & 


Body Cookies Headers(15) Tests (0/0! Status 2000K Time 661ms 


a 
D 


Raw Preview | | JSONY | | 到 





Sect "M { 
spot "https://open. spotify.con/artist/G0dUWJ8sBjDraHygGUXeCF " 


ef": (uil, 


n 
2 
3 
4 
5+ "followers": ( 
6 
7 "total": 421613 
8 
9 


» 
"genres": [ 
otk" 







op" 


tps: //api BAN Re s/00dUWJ0sB jDraHygGUXeCF " 
UWJ8s8 jDrqHygGUXeCI 
t 


16, 
"url": "https: //i.sedn.co/image/eb266625dab075341e8c4378a177a27370£91903" , 
19 "width": 1000 





22 "height": 522 
23 vurt” whee ips 1/4. scdn.co/image/2t91c3cace3cSa6a48f3d0e2£021364049110332" , 
24 "width" 


27 "he: 





2 163, 

"url": "https://i.scdn.co/image/2efc93d7ee88435116093274980f04ebceb7b527" , 

29 "width": 200 
了 


{ 
32 "height": 52 
33 url" vee ies / [4.scdn.co/1mage/4£252977504df24051195c368092904916841a23" , 
34 "width" 





"Band of Horses" 
i8. 




















图 15-1 Spotify 中 用 来 获取 艺术 家 的 服务 端点 





但 是 对 于 这 个 测试 ， 我 们 仅 需要 name 和 images 属 性 。 
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调用 setResponse 时 ， 响 应 会 作用 于 后 面 所 有 调用 服务 方法 的 下 一 轮 调用 过 程 。 在 本 例 中 ， 
我 们 要 的 结果 是 getArtist 方 法 返回 此 响应 。 




















接 下 来 ,通过 路 由 器 定位 并 进行 advance 人 处理 ,现在 视图 已 经 生成 ,可 以 使 用 组 件 视图 的 DOM 























表现 形式 检测 是 否 已 经 正确 地 生成 了 艺术 家 。 
fixture.debugElement .nativeElement 一 行 中 读 取 DebugElement 的 nativeElement 属 性 日 
以 做 到 这 一 点 。 








在 断言 语句 中 ， 我 们 期 望 H1 标 签 中 包含 艺术 家 的 名 字 ， 在 本 例 中 是 字符 串 ARTIST NAME (W 





自 上 面 的 artist 工 具 夹 )。 


为 了 检查 这 些 条 件 , 我 们 用 到 了 NativeElement 的 querySelector 方 法 。 此 方法 会 返回 与 CSS 


选择 器 匹配 的 第 一 个 元 素 。 
对 于 H1 ， 我 们 检测 其 文本 内 容 确实 是 ARTIST NAME, ， 而 图 片 的 src 属 性 值 为 IMAGE 1. 
至 此 ， 我 们 已 经 完成 了 对 ArtistCcomponent 组 件 的 测试 。 
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为 了 演示 为 表单 编写 测试 ， 我 们 使 用 在 第 5 童 中 创建 的 DemoFormNgMode1 组 件 。 这 个 例子 很 





不 错 ， 因 为 它 用 到 了 Angular 表 单 的 一 些 特性 : 


a 使 用 FormBui lder 
口 包含 表单 验证 
口 处 理事 件 


下 面 是 这 个 类 的 完整 代码 。 


code/forms/app/forms/demo form with events.ts 




















import { Component } from 'Gangular/core'; 
import { 

FormBuilder, 

FormGroup, 

Validators, 

AbstractControl 

from 'Gangular/forms'; 


we 


@Component ( { 
selector: 'demo-form-with-events', 
template: ^ 
«div class="ui raised segment"» 
«h2 class="ui header"»Demo Form: with events«/h2» 
«form [formGroup]="myForm" 
(ngSubmit )="onSubmit(myForm. value)" 
class="ui form"> 


15.10 


测试 表单 


437 





<div class="field" 
[class.error]="!sku.valid && sku.touched"» 
«label for="skuInput">SKU</label> 
«input type="text" 
class-"form-control" 
id="skuInput" 
placeholder="SKU" 
[ formControl ]="sku"> 
«div «xngI f="!sku.valid" 
class="ui error message">SKU is invalid</div> 
«div «nglIfz"sku.hasError('required')" 
class-"ui error message">SKU is required</div> 
«/div» 


«div xngIfz"!myForm.valid" 
class-"ui error message">Form is invalid«/div» 


«button type="submit" class-"ui button"»Submit«/button» 
«/ form» 
«/div» 
}) 
export class DemoFormWithEvents { 
myForm: FormGroup; 
sku: AbstractControl; 


constructor(fb: FormBuilder) { 
this.myForm = fb.group({ 
sku': ['', Validators.required] 


this.sku = this.myForm.controls['sku']; 


this.sku.valueChanges.subscribe( 
(value: string) => { 
console.log('sku changed to:', value); 
j 
); 


this.myForm.valueChanges.subscribe( 
(form: any) => { 


console.log('form changed to:', form); 
} 
); 
j 
onSubmit(form: any): void { 
console.log('you submitted value:', form.sku); 
} 


} 
回顾 一 下 ， 这 段 代 码 包 含 以 下 行为 : 























T 











OQ 当 没 有 值 填 充 SKU 字 段 时 ， 会 显示 两 条 验证 错误 信息 ， 分 别 是 SKU is invalid F#ISKU is 








required; 
O 当 SKU 字 段 的 值 发 生 改 变 时 ， 在 控制 台 打 印 一 条 日 志 信 息 ; 
O 当 表 单 发 生 改 变 时 ， 也 在 控制 台 打印 一 条 日 志 信 息 ; 
O 当 提交 表单 时 ， 在 控制 台 打 印 最 后 一 条 日 志 信 息 。 
很 显然 , 我 们 用 到 了 一 个 外 部 依赖 ， 即 控制 台 。 正 如 我 们 之 前 学 到 的 那样 ， 必 须 用 一 些 技巧 
来 模拟 所 有 外 部 依赖 。 

















15.10.1 创建 一 个 ConsoleSpy 


这 次 不 用 spyobject 来 创建 伪 对 象 。 既 然 我 们 所 有 使 用 console 的 场景 都 是 调用 1og 方 法 ,可 
以 让 事情 更 简单 一 些 。 
用 我 们 能 够 掌控 的 ConsoleSpy 替 换 原 来 依赖 于 window.console 对 象 的 console 实 例 。 


code/forms/test/util.ts 








export class ConsoleSpy { 
public logs: string[] = []; 
log(...args) { 
this.logs.push(args. join(' ')); 


warn(...args) { 
this.log(...args); 
} 
} 
ConsoleSpy 会 接收 所 有 日 志 记录 , 简单 地 转换 成 字符 串 , 并 存储 在 其 内 部 一 个 日 志 记录 字符 


串 列 表 中 。 


在 我 们 的 console.1og 版 本 中 ， 为 了 接收 可 变 参 数 ， 我 们 使 用 ES6 和 TypeScript 
的 Rest 参 数 "。 
这 个 操作 符 由 省 略 号 表示 ， 如 我 们 的 函数 参数 . . .theArgs。 简单 概括 ， 使 用 它 
表示 我 们 将 接收 从 点 号 起 所 有 剩余 的 参数 。 例如 (a，b，...theArgs) 调 用 了 
func(1，2，3，4，5)， 那 么 a 应 该 是 1:，b 应 该 是 32， 而 theArgs 应 该 包含 数组 
[3, 4, 5]。 
如 果 你 安装 了 最 新 的 Node.js”， 可 以 自己 尝试 一 下 : 
$ node —-harmony 
> var test = (a, b, ...theArgs) => console.log('a=',a,'b=',b, 'theArgs-' , theArgs) ; 
undefined 


» test(1,2,3,4,5); 
a= 1 b= 2 theArgs- [ 3, 4, 5 ] 





(D https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/rest parameters 
@ https://nodejs.org/en/ 
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DORE, 我 们 并 不 把 它 写 进 控制 台 本 身 ， 而 是 将 它 存储 在 一 个 数组 中 。 如 果 在 测试 下 面 的 代码 
调用 了 console.10g 三 次 : 











console.log('First message', 'is', 123); 
console.log('Second message'); 
console.log('Third message'); 


我 们 期 望 _ 1ogs 字 段 中 包含 一 个 数组 ['First message is 123', 'Second message', 'Third 


message ' ] 。 


15.10.2 安装 ConsoleSpy 


为 了 在 测试 中 使 用 探 子 ， 我 们 声明 了 两 个 变量 : originalConsole 和 fakeConsole。 前 者 存 
放 一 份 原始 控制 台 实 例 的 引用 ， 后 者 则 存放 控制 台 的 模拟 版 本 。 我 们 还 声明 了 一 些 有 助 于 测试 
input 和 form 元 素 的 变量 。 








code/forms/test/forms/demo form with events.spec.ts 


describe('DemoFormWithEvents', () => { 
let originalConsole, fakeConsole; 
let el, input, form; 


下 面 可 以 安装 这 个 伪 控 制 台 ,指定 提供 者 。 


code/forms/test/forms/demo form with events.spec.ts 


beforeEach(() => { 
// replace the real window.console with our spy 
fakeConsole = new ConsoleSpy(); 
originalConsole = window.console; 
(<any>window).console = fakeConsole; 


TestBed.configureTestingModule( { 
imports: [ FormsModule, ReactiveFormsModule ], 
declarations: [ DemoFormWithEvents ] 
D); 
2r 


回 到 测试 代码 ， 下 面 要 做 的 是 将 真实 控制 台 替 换 成 我 们 的 模板 版 本 ， 换 掉 原 始 实例 。 
后 ， 在 afterAl1 方 法 中 将 原始 控制 台 实 例 还 原 ， 以 免 对 其 他 测试 造成 泄漏 〈1leak )。 








code/forms/test/forms/demo form with events.spec.ts 


// restores the real console 
afterAll(() => («any»window).console = originalConsole); 





15.10.3 配置 测试 模块 


主意 , 我 们 在 beforeEach 块 中 调用 了 TestBed .configureTestingModule。 要 记 住 configure- 
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TestingModule 方 法 为 测试 设置 了 根 NgModule。 
我 们 在 本 例 中 导入 了 两 个 表单 模块 ， 声 明了 一 个 DemoFormWithEvents 组 件 。 
现在 我 们 可 以 操控 控制 台 了 ， 下 面 开 始 测试 表单 。 





15.10.4 测试 表单 
现在 需要 对 验证 错误 信息 和 表单 事件 进行 测试 
首先 要 做 的 是 取得 SKU 输 入 字段 和 表单 元 素 的 引用 。 


code/forms/test/forms/demo form with events bad.spec.ts 


it('validates and triggers events', fakeAsync((tcb) => ( 
let fixture = TestBed.createComponent(DemoFormWithEvents); 


let el = fixture.debugElement.nativeElement; 

let input - fixture.debugElement.query(By.css('input')).nativeElement; 
let form = fixture.debugElement.query(By.css('form')).nativeElement; 
fixture.detectChanges(); 


最 后 一 行 通知 Angular 提 交 所 有 未 完成 的 变更 , 正如 我 们 在 15.8 节 所 做 的 那样 。 接 下 来 将 SKU 
输入 值 设 置 为 空 字符 串 。 


code/forms/test/forms/demo form with events bad.spec.ts 























input.value = ''; 
dispatchEvent(input, 'input'); 
fixture.detectChanges(); 
tick(); 


这 里 我 们 用 dispatchEvent 通 知 Angular 输 入 元 素 发 生 了 变更 , 再 一 次 触发 变更 检测 。 最 后 用 
tick( ) 确 保 此 时 已 触发 的 所 有 异步 代码 都 已 经 执行 。 


在 这 个 测试 中 使 用 fakeAsync 和 tick 的 目的 就 是 为 了 确保 表单 事件 被 触发 。 如 果 使 用 async 
和 inject 替 代 ， 就 必须 在 事件 被 触发 前 运行 所 有 代码 。 


现在 我 们 已 经 修改 了 输入 值 ， eee (使 用 el 变量 ) 查询 组 件 元 素 ， 寻 找 
是 错误 信息 AN 的 所 有 子 元 素 ， 并 确保 错误 信息 Boe 经 显示 。 


code/forms/test/forms/demo form with events bad.spec.ts 



































let msgs - el.querySelectorAll('.ui.error.message'); 
expect(msgs[0].innerHTML).toContain('SKU is invalid'); 
expect(msgs[1].innerHTML).toContain('SKU is required'); 


fe Fo EC, ， 不 过 这 次 在 SKU 字 段 输 入 一 个 值 。 


code/forms/test/forms/demo form with events bad.spec.ts 





input.value - 'XYZ'; 
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dispatchEvent(input, 'input'); 
fixture.detectChanges(); 
tick(); 


确保 所 有 的 错误 信息 消失 。 


code/forms/test/forms/demo form with events bad.spec.ts 


msgs - el.querySelectorAll('.ui.error.message'); 
expect(msgs.length).toEqual(0); 


最 后 ， 我 们 触发 表单 的 提交 事件 。 


code/forms/test/forms/demo form with events bad.spec.ts 


fixture.detectChanges(); 
dispatchEvent(form, 'submit'); 
tick(); 


最 终 ， 我 们 要 确保 在 提交 表单 时 ， 通 过 检查 打印 到 控制 台 的 日 志 信息 来 确定 事件 被 触发 。 





code/forms/test/forms/demo form with events bad.spec.ts 


// checks for the form submitted message 
expect(fakeConsole.logs).toContain('you submitted value: XYZ'); 


我 们 可 以 继续 为 另外 两 个 事件 添加 新 的 检验 : SKU 变 更 和 表单 变更 。 然 而 , 我 们 的 测试 代码 
越 来 越 见 长 。 
运行 测试 ， 可 以 看 到 测试 通过 ， 如 图 15-2 所 示 。 


DemoFormWithEvents 
w validates and trigger events 


图 15-2” DemoFormWithEvents 测 试 输出 
测试 本 身 没有 问题 ， 但 我 们 在 代码 风格 上 闻 到 了 一 些 坏 味道 : 


a 一 个 超 长 的 it 条 件 (超过 5~10 行 ); 
OQ 每 个 it 中 不 止 一 两 个 expect; 
0 测试 描述 中 使 用 了 and 一 词 。 



































1510.5 ” 重 构 表单 测试 
解决 问题 的 第 一 步 就 是 将 创建 组 件 、 获 取 组 件 元 素 和 用 于 输入 和 表单 元 素 的 代码 从 中 抽取 


code/forms/test/forms/demo form with events.spec.ts 


























function createComponent(): ComponentFixture<any> { 
let fixture = TestBed.createComponent(DemoFormWithEvents) ; 
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el - fixture.debugElement.nativeElement; 

input - fixture.debugElement.query(By.css('input')).nativeElement; 
form = fixture.debugElement.query(By.css('form')).nativeElement; 
fixture.detectChanges(); 


return fixture; 


} 
createComponent 代 码 相 当 简 明 : 使 用 TestBed .createComponent 创 建 组 件 ， 获取 所 有 元 素 
并 调用 detectChanges。 


现在 第 一 个 要 测试 的 是 ， 提 供 一 个 空 的 SKU 字 段 ， 我 们 应 该 看 到 两 条 错误 信息 。 








code/forms/test/forms/demo form with events.spec.ts 


it('displays errors with no sku', fakeAsync( () => { 
let fixture = createComponent(); 
input.value = ''; 
dispatchEvent(input, 'input'); 
fixture.detectChanges(); 


// no value on sku field, all error messages are displayed 

let msgs - el.querySelectorAll('.ui.error.message'); 

expect(msgs[0].innerHTML).toContain('SKU is invalid'); 

expect(msgs[1].innerHTML).toContain('SKU is required'); 
})); 


如 你 所 见 ， 代 码 清晰 了 很 多 。 测 试 很 专注 ， 而 且 只 测试 一 件 事 。 太 棒 了 ! 
在 新 的 结构 中 添加 第 二 个 测试 也 很 简单 。 这 次 要 测试 的 是 , 一 旦 给 SKU 字 段 赋值 ,错误 信息 
就 会 消失 。 


code/forms/test/forms/demo form with events.spec.ts 








it('displays no errors when sku has a value', fakeAsync( () => { 
let fixture = createComponent(); 
input.value = 'XYZ'; 
dispatchEvent(input, 'input'); 
fixture.detectChanges(); 


let msgs - el.querySelectorAll('.ui.error.message'); 
expect(msgs.length).toEqual(0); 
})); 


你 可 能 注意 到 了 一 点 : 到 目前 为 止 , 我 们 的 测试 代码 并 没有 使 用 fakeAsync ,而 是 使 用 async 
和 inject 替 代 。 


这 次 重 构 的 另 一 个 好 处 是 ， 仅 在 当 我 们 检查 是 否 有 信息 发 送 到 控制 台 时 才 使 用 fakeAsync 和 
tick() ， 因 为 这 正 是 由 表单 事件 处 理 融 负责 的 。 


下 一 个 测试 恰恰 是 : 当 SKU 值 发 生变 更 时 ， 我 们 应 该 有 一 条 信息 发 送 到 控 洁 



































at 
= 





15.10 


测试 表单 


443 





code/forms/test/forms/demo form with events.spec.ts 


it('handles sku value changes', fakeAsync( () => { 
let fixture - createComponent(); 
input.value - 'XYZ'; 
dispatchEvent(input, 'input'); 
tick(); 


expect(fakeConsole.logs).toContain('sku changed to: XYZ'); 
IODE 


对 于 表单 变更 进行 同样 的 处 到 


code/forms/test/forms/demo form with events.spec.ts 


it('handles form changes', fakeAsync(() => { 
let fixture - createComponent(); 
input.value - 'XYZ'; 
dispatchEvent(input, 'input'); 
tick(); 


na 





expect(fakeConsole.logs).toContain('form changed to: [object Object]'); 


D) 
对 于 表单 提交 事件 也 进行 同样 的 处 理 。 


code/forms/test/forms/demo form with events.spec.ts 


it('handles form submission', fakeAsync((tcb) => { 
let fixture - createComponent(); 
input.value - 'ABC'; 
dispatchEvent(input, 'input'); 
tick(); 


fixture.detectChanges(); 
dispatchEvent(form, 'submit'); 
tick(); 


expect(fakeConsole.logs).toContain('you submitted value: ABC'); 


D); 
再 次 运行 测试 ， 会 得 到 更 清晰 的 输出 结果 ， 如 图 15-3 所 示 。 


DemoFormWithEvents 
4 displays errors with no sku 
4 displays no errors when sku has a value 


w handles sku value changes 
w handles form changes 
w handles form submission 





图 15-3” 重 构 后 的 DemoFormWwWithEvents 测 试 输出 











这 次 重 构 的 另外 一 个 好 处 是 ， 出 错时 一 眼 就 可 以 看 出 来 。 回 到 组 件 代码 ,在 提交 表单 时 更 改 


消息 ， 从 而 强制 一 个 测试 失败 。 
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onSubmit(form: any): void { 
console.log('you have submitted the value:', form.sku); 


} 
如 果 运 行 之 前 版 本 的 测试 ， 可 能 看 到 如 图 15-4 所 示 的 结 


DemoFormWithEvents 


Expected [ 'sku changed to: ', 'form changed to: [object Object]', ‘sku changed to: XYZ', ‘form cha 
nged to: [object Object]', 'you have submitted the value: XYZ' ] to contain ‘you submitted value: XYZ'. 


at /Users/fcoury/code/ng-book2/manuscript/code/forms/test.bundle.js:41894 

at run (/Users/fcoury/code/ng-book2/manuscript/code/forms/test.bundle.js:5942) 

at zoneBoundFn (/Users/fcoury/code/ng-book2/manuscript/code/forms/test.bundle. js:5915) 

at lib$es6$promise$$internal$$tryCatch (/Users/fcoury/code/ng-book2/manuscript/code/forms/test. 





图 15-4 重 构 前 的 DemoFormWithEvents 错 误 输 出 


它 不 会 立即 显示 失败 的 原因 所 在 。 我 们 必须 通过 错误 代号 来 明白 提交 的 信息 失败 了 。 我 们 也 
肯定 这 是 破坏 组 件 的 唯一 事件 ， 因 为 还 可 能 有 其 他 测试 条 件 在 遭遇 失败 时 根本 没有 机 会 运 

































































现在 比较 一 下 在 重 构 过 的 代码 上 得 到 的 错误 信息 ， 如 图 15-5 所 示 。 


DemoFormWithEvents 
w displays errors with no sku 
w displays no errors when sku has a value 
w handles sku value changes 
w handles form changes 


Expected [ 'sku changed to: ABC', 'form changed to: [object Object]', 'you have submitted the 
alue: ABC' ] to contain ‘you submitted value: ABC'. 
at /Users/fcoury/code/ng-book2/manuscript/code/forms/test.bundle.js:41673 
at run (/Users/fcoury/code/ng-book2/manuscript/code/forms/test.bundle.js:5942) 
at zoneBoundFn (/Users/fcoury/code/ng-book2/manuscript/code/forms/test.bundle.js:5915) 
at lib$es6$promise$$internal$$tryCatch (/Users/fcoury/code/ng-book2/manuscript/code/forms/ 





图 15-5 重 构 后 的 DemoFormWithEvents 错 误 输 出 


这 个 版 本 很 清晰 ， 唯 一 失败 的 是 表单 提交 事件 。 








pum 


15.11 测试 HTTP 请 求 
我 们 可 以 采用 与 之 前 相同 的 策略 来 测试 HTTP 交 互 : 写 一 个 Http 类 的 模拟 版 本 ， 因 为 它 是 一 
个 外 部 依赖 。 


但 是 因为 绝 大 多 数 使 用 Angular 编 写 的 单 页 面 程序 都 是 使 用 HTTP 与 API 交 互 的 ， 所 以 Angular 
测试 类 库 已 经 提供 了 一 个 内 置 的 替代 品 : MockBackend。 


本 章 之 前 测试 SpotifyService 类 时 已 经 用 到 过 


现在 继续 深入 , 见识 一 下 更 多 的 测试 场景 , 也 可 以 获得 更 好 的 编程 实践 。 为 了 实现 这 个 目的 ， 
我 们 为 第 6 章 的 例子 编写 测试 。 
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首先 ， 一 起 看 看 如 何 测试 不 同 的 HTTP 方 法 ， 如 POST 和 DELETE ， 还 有 如 何 测 试 正 要 发 送 正确 
的 HTTP 头 信息 。 


回 到 第 6 章 ， 我 们 创建 的 这 个 实例 包括 了 如 何 使 用 Http 实 现 达到 目的 。 








15.11.1 测试 Post 方法 
第 一 个 要 写 的 测试 是 确保 makePost 方 法 发 送 一 条 正确 的 POST 请 求 。 








code/http/app/ts/components/MoreHTTPRequests.ts 


makePost(): void { 
this.loading = true; 
this.http.post( 
"http: //jsonplaceholder.typicode.com/posts', 
JSON. stringify({ 


body: 'bar', 
title: 'foo', 
userId: 1 


.subscribe((res: Response) => { 
this.data - res.json(); 
this.loading - false; 

; 

j 


为 这 个 方法 编写 测试 时 ， 目 的 是 测试 两 点 : 
(1) 请 求 方法 (POST) 是 正确 的 ; 

(2) 目标 URL 也 是 正确 的 。 

下 面 把 这 个 想法 变 成 测试 。 


code/http/test/: MoreHTTPRequests.spec.ts 


it('performs a POST', 
async(inject([MockBackend], (backend) => ( 
let fixture = TestBed.createComponent (MoreHTTPRequests ) ; 
let comp = fixture.debugElement.componentInstance; 



































backend.connections.subscribe(c => { 
expect(c.request.url) 
.toBe( 'http://jsonplaceholder.typicode.com/posts'); 
expect(c.request.method).toBe(RequestMethod.Post); 
c.mockRespond(new Response(<any>{body: '{"response": "OK"}'})) 


); 








comp .makePost(); 
expect(comp.data).toEqual({'response': 'OK'}); 
})) 
) ; 
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注意 ， 可 以 在 backend .connections 上 调用 subscribe 方 法 。 每 当 有 新 连接 建立 时 就 会 触发 
我 们 的 代码 ， 这 提供 了 检查 请 求 内 容 的 机 会 ， 并 可 以 按 预期 设置 响应 结果 。 


这 里 ， 你 也 可 以 ， 


口 添加 请 求 断言 语句 ， 比 如 检查 请 求 的 URL 和 HTTP 方 法 是 否 正确 ; 
a 设置 模拟 的 响应 结果 ， 强 制 代码 根据 不 同 的 测试 场景 作出 不 同 的 响应 。 


Angular 使 用 一 个 名 为 RequestMethod 的 enum 来 判别 不 同 的 HTTP 方 法 。 这 里 是 支持 的 方法 。 


export enum RequestMethod { 
Get, 

Post, 

Put, 

Delete, 

Options, 

Head, 

Patch 















































} 
最 后 ， 在 调用 makePost( ) 后 ， 我 们 再 次 检查 以 确保 预 设 的 响应 就 是 分 配给 组 件 的 那个 。 
现在 我 们 理解 了 其 工作 原理 ， 针 对 DELETE 方 法 增加 一 个 测试 并 不 难 。 











15.11.2 ”测试 DELETE 方法 

















这 是 makeDelete 方 法 的 具体 实现 。 


code/http/app/ts/components/MoreHTTPRequests.ts 


makeDelete(): void { 
this.loading = true; 
this. http.delete('http://jsonplaceholder .typicode.com/posts/1' ) 
.subscribe((res: Response) => { 
this.data = res. json(); 
this.loading = false; 
37 
} 


这 是 我 们 用 来 测试 它 的 代码 。 


code/http/test/: MoreHTTPRequests.spec.ts 


it('performs a DELETE', 
async(inject([MockBackend], (backend) => { 
let fixture = TestBed.createComponent (MoreHTTPRequests ) ; 
let comp = fixture.debugElement.componentInstance; 

















backend.connections.subscribe(c => { 
expect(c.request.url) 
.toBe( 'http://jsonplaceholder.typicode.com/posts/1 ' ) ; 
expect(c.request.method).toBe(RequestMethod.Delete); 
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c.mockRespond(new Response(<any>{body: '{"response": "OK"}'})) 


}); 


comp.makeDelete(); 
expect(comp.data).toEqual({'response': 'OK'}); 
})) 
25 


除了 URL 和 HTTP 方 法 (这 里 使 用 RequestMethod.Delete ) 稍 有 不 同 , 代码 并 无 太 大 的 差异 。 





15.11.3 测试 HTTP 3k 


针对 这 个 类 ， 最 后 一 个 要 测试 的 方法 是 makeHeaders。 




















code/http/app/ts/components/MoreHTTPRequests.ts 


makeHeaders(): void { 
let headers: Headers = new Headers(); 
headers.append('X-API-TOKEN', 'ng-book'); 


let opts: RequestOptions - new RequestOptions(); 
opts.headers - headers; 


this.http.get('http://jsonplaceholder.typicode.com/posts/1', opts) 
.subscribe((res: Response) -» ( 
this.data - res.json(); 
; 
j 


在 本 例 中 ,我 们 的 测试 应 该 集中 在 确保 X-API-TOKEN 头 被 正确 地 设置 为 ng-book。 


code/http/test/MoreHTTPRequests.spec.ts 


it('sends correct headers', 
async(inject([MockBackend], (backend) => ( 
let fixture = TestBed.createComponent (MoreHTTPRequests ) ; 
let comp = fixture.debugElement .componentInstance; 








backend.connections.subscribe(c => { 
expect(c.request.url) 

.toBe( 'http://jsonplaceholder.typicode.com/posts/1'); 
expect(c.request.headers.has( 'X-API-TOKEN' ) ) .toBeTruthy( ) ; 
expect(c.request.headers.get('X-API-TOKEN' ) ).toEqual( 'ng-book ' ); 
c.mockRespond(new Response(<any>{body: '{"response": "OK"}'})) 


5; 


comp .makeHeaders( ); 


expect(comp.data).toEqual({'response': 'OK'}); 
})) 


请 求 连接 的 request .headers 属 性 会 返回 一 个 Headers 实 例 。 我 们 使 用 两 个 方法 执行 两 个 不 
同 的 断言 : 














"uni 
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O has 方法 检查 指定 的 头 是 否 已 经 设置 ， 忽 略 其 值 ; 
口 get 方 法 返回 设置 的 值 。 


如 果 只 检查 是 否 设 置 了 头 即 可 ， 使 用 has 。 如 果 需 要 检测 其 设置 的 值 ， 要 使 用 get。 


到 此 为 止 , 我 们 完成 了 Angular 中 不 同 HITP 方 法 和 头 的 测试 。 现 在 转向 一 个 更 为 复杂 的 例子 ， 
它 与 你 在 编写 真实 程序 时 遇 到 的 场景 非常 接近 。 

















15.11.4 测试 YouTubeService 


我 们 在 第 6 章 构建 的 另外 一 个 实例 是 YouTube 视 频 搜 索 。 在 这 个 实例 中 ，HTTP 交 互 过 程 包含 
在 YouTubeService 类 中 。 











code/http/app/ts/components/YouTubeSearchComponent.ts 


/** 
* YouTubeService connects to the YouTube API 
* See: x https://developers.google.com/youtube/v3/docs/search/list 
*/ 
@Injectable() 
export class YouTubeService { 
constructor(private http: Http, 
GInject(YOUTUBE API KEY) private apiKey: string, 
GInject(YOUTUBE API URL) private apiUrl: string) ( 
j 


search(query: string): Observable«SearchResult[]» { 
let params: string - [ 
`q=${query}`, 
`key=${this.apiKey}`, 
^part-snippet', 
^type-video', 
^maxResults-10" 
].join('&'); 
let queryUrl: string = ^$[this.apiUrl]?$(params]'; 
return this.http.get(queryUrl) 
.map((response: Response) => { 
return (<any>response. json()).items.map(item => { 
// console.log("raw item", item); // uncomment if you want to debug 
return new SearchResult({ 
id: item.id.videold, 
title: item.snippet.title, 
description: item.snippet.description, 
thumbnailUrl: item.snippet.thumbnails.high.url 





它 利用 YouTube API 搜 索 视 频 ， 解 析 结 果 并 保存 到 一 个 SearchResult 实 例 中 。 
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code/http/app/ts/components/YouTubeSearchComponent.ts 


class SearchResult { 
id: string; 
title: string; 
description: string; 
thumbnailUrl: string; 
videoUrl: string; 


constructor(obj?: any) 
this.id obj && obj.id null; 
this.title obj && obj.title null; 


this.description 
this. thumbnailUrl 
this.videoUrl 


obj && obj.thumbnailUrl null; 
obj && obj.videoUrl 
"https: //www.youtube.com/watch?v=${this.id}*; 


Won n n H c 


E 
E 
obj && obj.description || null; 
lI 
E 


j 
} 


我 们 需要 测试 这 个 服务 的 几 个 重要 方面 : 

a 给 定 一 个 JSON 响 应 ， 服 务 能 够 分 析出 视频 的 id、 标 题 (title )、 描 述 (description ) 和 缩 略 
图 (thumbnail ) 属性 ; 

a 我 们 请 求 的 URL 使 用 了 提供 的 搜索 关键 字 ; 

口 URL 前 级 设置 在 YOUTUBE_API_URL 常 量 中 ，; 

口 使 用 的 API 键 值 与 YOUTUBE_API_KEY 常 量 匹 配 。 


记 住 这 些 ， 开 始 编写 测试 。 


code/http/test/YouTubeSearchComponentBefore.spec.ts 


describe( 'MoreHTTPRequests (before)', () => { 
beforeEach(() => { 
TestBed.configureTestingModule( { 
providers: [ 
YouTubeService, 
BaseRequestOptions, 
MockBackend, 
{ provide: YOUTUBE API KEY, useValue: 'YOUTUBE API KEY' }, 
{ provide: YOUTUBE API URL, useValue: 'YOUTUBE API URL' }, 
{ provide: Http, 
useFactory: (backend: ConnectionBackend, 
defaultOptions: BaseRequestOptions) => { 
return new Http(backend, defaultOptions); 
}, deps: [MockBackend, BaseRequestOptions] } 






































P 


和 之 前 写 测 试 的 准备 工作 一 样 ， 首 先 配置 依赖 : 这 里 我 们 使 用 真实 的 YouTubeService, 但 
YOUTUBE_API_KEY 和 YOUTUBE_API_URL 使 用 伪 值 。 同 时 配置 Http 类 使 用 一 个 MockBackend 类 。 
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现在 ,开始 写 第 一 个 测试 用 例 。 


code/http/test/YouTubeSearchComponentBefore.spec.ts 


describe('search', () => { 
it('parses YouTube response’, 
inject( [YouTubeService, MockBackend], fakeAsync((service, backend) => { 
let res; 


backend.connections.subscribe(c => { 
c.mockRespond(new Response( <any> { 


body: ~ 
{ 
"items": [ 
{ 
"id": { "videoId": "VIDEO ID" }, 
"snippet": { 


"title": "TITLE", 
"description": "DESCRIPTION", 
"thumbnails": { 

"high": { "url": "THUMBNAIL URL" } 


231r 
})); 
}); 
service.search('hey').subscribe( res => { 
res = _res; 
3) 
tick(); 


let video = res[Q]; 
expect(video.id).toEqual('VIDEO ID'); 
expect(video.title).toEqual( TITLE'); 
expect(video.description).toEqual( 'DESCRIPTION' ) ; 
expect(video.thumbnailUrl).toEqual( 'THUMBNAIL_URL'); 
1) 
) 
}); 


这 里 我 们 通知 Http 返 回 一 个 伪 响 应 结果 ， 与 调用 真实 URL 时 期 望 YouTube API 返 回响 应 结果 
的 相关 字段 一 致 。 这 可 以 通过 调用 连接 的 mockRespond 方 法 实现 。 























code/http/test/YouTubeSearchComponentBefore.spec.ts 


service.search('hey').subscribe( res => { 
res = _res; 


F); 
tick(); 


接 下 来 调用 我 们 要 测试 的 方法 ; search。 调 用 时 使 用 关键 字 hey, 并 抓 取 响 应 结果 保存 在 res 
变量 中 。 


你 之 前 可 能 注意 到 了 ， 我 们 使 用 的 是 fakeAsync ， 它 需要 手动 调用 tick( ) 来 同步 异步 代码 。 
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这 里 沿用 这 种 模式 ， 期 望 搜索 完成 了 执行 过 程 ， 并 且 res 已 经 保存 了 结 
现在 就 可 以 验证 结果 值 了 。 


code/http/test/YouTubeSearchComponentBefore.spec.ts 














let video = res[Q]; 
expect(video.id).toEqual('VIDEO ID'); 
expect(video.title).toEqual('TITLE'); 
expect(video.description).toEqual( DESCRIPTION'); 
expect(video.thumbnailUrl).toEqual( 'THUMBNAIL URL '); 


从 响应 列表 中 读 取 第 一 个 元 素 。 我 们 已 知 它 是 SearchResult ， 现 在 要 基于 之 前 预 设 的 响应 
结果 检查 每 个 属性 设置 正确 无 误 : id、 标 题 、 描 述 和 缩 略 图 URL 应 该 全 部 匹配 。 


至 此 , 我 们 完成 了 写 测 试 的 第 一 个 目标 。 然 而 , 刚才 不 是 说 使 用 一 个 超大 让 的 方法 并 使 用 太 
多 的 expect 产 生 了 代码 坏 味道 吗 ? 


的 确 是 ， 所 以 在 继续 前 进 之 前 ， 先 对 代码 进行 重 构 ， 从 而 能 更 容易 地 使 用 单独 的 断言 。 
在 describe('search'，...) 内 部 添加 以 下 辅助 函数 。 


code/http/test/YouTubeSearchComponentAfter.spec.ts 
































function search(term: string, response: any, callback) { 
return inject([YouTubeService, MockBackend], 
fakeAsync((service, backend) => { 
var req; 
var res; 


backend.connections.subscribe(c => { 
req = c.request; 
c.mockRespond(new Response(<any>{body: response} ) ); 


IDE 

service.search(term).subscribe( res => { 
res - res; 

D); 

tick(); 


callback(req, res); 
}) 
) 
} 

一 起 看 看 这 个 函数 如 何 工 作 : 它 使 用 inject 和 fakeAsync 完 成 了 与 之 前 同样 的 任务 , 不同 的 
是 它 使 用 了 一 种 配置 的 方式 。 我们 提供 了 一 个 搜索 关键 字 、 一 个 响应 和 一 个 回调 函数 。 有 了 这 些 
参数 , 我 们 使 用 搜索 关键 字 调 用 search 方 法 , 设置 好 伪 响 应 结果 , 并 在 完成 请 求 时 调用 回调 函数 ， 
从 而 提供 请 求 和 响应 对 象 。 


使 用 这 种 方法 ， 测 试 只 需要 调用 这 个 函数 并 检查 其 中 一 个 对 象 即 可 。 
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将 之 前 写 的 测试 拆 分 成 四 个 测试 ， 每 个 测试 针对 一 种 不 同 的 响应 结果 。 


code/http/test/YouTubeSearchComponentA fter.spec.ts 


it('parses YouTube video id', search('hey', response, (req, res) => { 
et video = res[0]; 

expect(video.id).toEqual('VIDEO ID'); 

})); 


it('parses YouTube video title', search('hey', response, (req, res) => { 
et video = res[Q]; 

expect(video.title).toEqual('TITLE'); 

D) 





it('parses YouTube video description', search('hey', response, (req, res) =>\ 


let video = res[Q]; 
expect(video.description).toEqual( DESCRIPTION ); 


5; 
it('parses YouTube video thumbnail', search('hey', response, (req, res) => { 
let video = res[Q]; 


expect(video.description).toEqual( DESCRIPTION ' ) ; 
9335; 


看 起 来 不 错 吧 ? 这 个 小 而 且 专注 的 测试 只 有 一 个 测试 目的 。 太 棒 了 ! 
现在 为 余下 的 目标 添加 测试 代码 应 该 很 容易 了 。 


code/http/test/YouTubeSearchComponentA fter.spec.ts 





it('sends the query', search('term', response, (req, res) => { 
expect(req.url).toContain('q-term'); 


})); 


it('sends the API key', search('term', response, (req, res) => { 
expect(req.url).toContain( 'key=YOUTUBE_API_KEY' 


); 


1 


Wn 


it('uses the provided YouTube URL', search('term', response, (req, res) => { 
expect(req.url).toMatch( /*YOUTUBE_API_URL\?/); 


); 


你 可 以 按照 自己 的 想法 随意 加 入 更 多 的 测试 。 比 如 , 针对 响应 结果 中 包含 多 个 条 目 并 有 不 同 
的 属性 添加 一 个 测试 。 看 看 代码 中 是 否 有 你 想 进 行 测试 的 其 他 方面 。 


























15.12 ”总结 


Angular 团 队 在 为 Angular 提 供 测 试 功能 方面 做 了 大 量 的 工作 。 这 样 我 们 才能 轻松 地 测试 应 用 
程序 的 方方面面 : 从 控制 器 到 服务 类 、 表 单 和 HTTP。 本 来 坏 手 的 异步 代码 测试 现在 也 不 费 吹 灰 
之 力 。 
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如 果 你 使 用 过 一 段 时 间 的 Angular， 那 么 可 能 已 经 有 了 基于 AngularJS 的 产品 。Angular 虽 然 很 
好 ,但 我 们 总 不 能 抛弃 现 有 的 一 切 ,用 Angular 重 写 整 个 产品 吧 ? 更 好 的 做 法 是 对 既 有 的 AngularJS 
应 用 进行 增 量 式 升 级 。 谢 天 谢 地 ，Angular 提 供 了 一 种 非常 棒 的 方式 来 实现 它 ! 

AngularJS 和 Angular 的 互 操作 性 已 经 相当 完善 。 在 本 章 中 ， 我 们 将 讨论 如 何 通过 写 混合 式 应 
用 的 方式 来 把 AngularJS 升 级 到 Angular。 这 种 混合 式 应 用 中 同时 运行 着 AngularJS 和 Angular 框 架 
(它们 之 间 还 可 以 交换 数据 )。 























16.4 周边 概念 


当 我 们 讨论 AngularJS 和 Angular 之 间 的 互 操 作 性 时 ， 会 涉及 很 多 周边 概念 ， 下 面 就 是 其 中 的 
一 些 o 























把 AngularJS 的 概念 映射 到 Angular: 大 体 上 ，Angular 的 组 件 就 是 AngularJS 的 指令 。 它 们 也 都 
用 到 了 “服务 ”。 不 过 本 章 是 讲 如 何 同时 使 用 AngularJS 和 Angular 的 ,所 以 我 们 假设 你 已 经 充分 了 
解 了 这 些 基础 知识 。 如 果 你 还 没 怎么 用 过 Angular， 请 先 阅读 第 3 章 。 

把 AngularJS 应 用 迁移 到 Angular 的 准备 工作 : AngularJS.5 提 供 了 新 的 .component 方 法 来 制作 
“组 件 型 指令 ”。 使 用 .component 有 利于 为 迁移 到 Angular 作 准备 ， 男 外 ， 创 建 瘦 控 制 器 (或 禁止 
使 用 ng-controller 指 令 ? ) 能 把 AngularJS 应 用 重 构 得 更 好 ， 也 更 容易 与 Angular 集 成 。 

准备 AngularJS 应 用 的 另 一 个 要 点 是 减少 或 消除 双向 绑 定 ， 更 多 地 使 用 单 向 数据 流 。 也 就 是 
说 ， 尽 量 不 要 通过 修改 $scope 在 指令 之 间 传 递 数 据 ， 而 是 改 用 服务 。 

这 些 理念 确实 很 重要 ,有 必要 进行 深入 探索 , 但 本 章 并 不 会 针对 升级 前 的 重 构 阶 段 讲 很 多 类 
似 的 最 佳 实践 。 















































(D http://teropa.info/blog/2014/10/24/how-ive-improved-my-angular-apps-by-banning-ng-controller.html 
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本 章 要 讲 的 是 下 面 这 一 点 。 

写 混 合式 AngularJS/Angular 应 用 : Angular 提 供 了 一 种 方式 来 启动 你 的 AngularJS 应 用 ， 然 后 
在 其 中 写 Angular 的 组 件 和 服务 。 写 完 Angular 组 件 , 只 要 把 它 和 AngularJS 组 件 混 在 一 起 就 可 以 了 。 
另外 ， 依 赖 注入 体系 也 支持 在 AngularJS 和 Angular 之 间 双 向 传递 数据 ， 因 此 你 写 的 服务 在 
AngularJS 和 Angular 中 都 能 运行 。 


它 最 大 的 好 处 是 什么 呢 ? 因为 变更 检测 是 在 Zones 中 运行 的 ， 所 以 你 再 也 不 用 调用 
$scope.apply 或 担心 变更 检测 方面 的 问题 了 。 




















16.2 我们 要 构建 什么 


在 本 章 中 ,我 们 准备 升级 一 个 名 叫 Interest 的 应 用 ， 它 模仿 了 Pinterest( 如 图 16-1 所 示 )。 其 思 
想 在 于 你 可 以 保存 一 枚 图 钉 (pin )， 即 一 个 带 图 片 的 链接 。 这 些 图 钉 会 显示 在 列表 中 ， 而 且 你 可 
以 收藏 (或 取消 收藏 ) 一 枚 图 钉 。 





BEN ia {book 











€ > CG [D locathost:8080/#/ 2 三 





Interest what you're interested in 


OLIVER OWL p 


oe | 
pi The FunCraft Book of Puppet play ife's handmade. easy to make puppets - oliver owl (detail) from 
yis ts 1976 ISBN: 0-590-11936-2 easy to make puppets by Joyce luckin (1975) 


二 tofutti break & MIKI Yoshihito (’+w*) » gillifiower 





图 16-1 ”完成 后 的 “山寨 版 ”Pinterest 





你 可 以 到 code/conversion/AngularJS 和 code/conversion/hybrid 下 载 AngularJS 版 和 
混合 版 的 完整 代码 。 


在 深入 讲解 之 前 ， 我 们 先 来 看 看 AngularJS 和 Angular 互 操作 的 各 种 使 用 场景 。 
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16.3 #2 AngularJS 映射 到 Angular 


大 体 来 说 ，AngularJS 的 五 个 主要 部 分 是 : 
a 指令 
a 控制 器 
a 作用 域 
口 服务 
口 依赖 注入 
这 些 在 Angular 中 则 发 生 了 显著 的 变化 。 你 可 能 听 说 过 , 来自 Angular 核 心 团队 的 Igor 与 Tobias 
在 2014 ngEurope 大 会 上 宣布 他 们 将 消灭 AngularJS 中 的 许多 “核心 ”思想 ?” ( 如 图 16-2 所 示 ) E 
体 来 说 ， 他 们 宣布 Angular 将 消灭 ; 
口 $scope (以 及 默认 的 双向 绑 定 ) 
口 指令 定义 对 象 
a 控制 器 


Dangular.module 
































图 16-2 ”在 2014 ngEurope 大 会 上 ，Igor 和 Tobias 移 除了 AngularJS.x 的 很 多 API。 
BOX. Michael Bromley (已 获 授权 ) 











CD 视频 地 址 : https://www.youtube.com/watch?v-gNmWybAyBHI 
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那些 使 用 AngularJS 构 建 应 用 并 习惯 于 AngularJS 思 维 的 人 可 能 会 问 ， 如 果 移 除了 那些 ， 还 剩 
下 什么 ?” 没有 控制 器 和 $scope 怎 么 能 构建 Angular 应 用 呢 ? 

尽管 有 很 多 人 喜欢 夸大 Angular 的 不 同 之 处 , 但 其 实 它 仍然 沿袭 了 AngularJS 的 大 量 核心 思想 。 
有 实 上 ，Angular 用 一 种 更 简单 的 模型 实现 了 同样 的 功能 。 

大 体 上 ，Angulat 的 核心 构造 为 : 
a 组 件 〈 可 看 作 指令 ) 
口 服务 


当然 , 还 需要 大 量 的 基础 设施 来 支撑 它们 的 工作 。 比 如 , 你 需要 用 依赖 注入 体系 来 管理 服务 ; 
需要 一 个 强力 的 变更 检测 机 制 , 以 便 在 应 用 中 更 有 效 地 传播 数据 变化 ; 还 需要 一 个 高 效 的 泻 染 层 ， 
以 便 在 正确 的 时 机 泻 染 DOM。 








iini 




















16.4 ”关于 互 操作 性 的 需求 


那么 ， 有 了 这 两 种 不 同 的 体系 ， 我们 需要 借助 哪些 特性 来 简化 互 操作 性 呢 ? 

口 在 AngularJS 中 使 用 Angular 的 组 件 : 我 们 首先 想到 的 是 , 要 能 写 出 新 的 Angular 组 件 ， 并 在 

AngularJS 的 应 用 中 使 用 它们 。 

口 在 Angular 中 使 用 AngularJS 的 组 件 : 我 们 一 般 不 会 把 整个 组 件 树 完全 替换 成 Angular 的 组 

件 ， 而 是 在 Angular 组 件 之 中 复 用 那些 AngularJS 组 件 。 

口 服务 共享 : 假设 我 们 有 一 个 UserService ， 想 要 在 AngularJS 和 Angular 之 间 共 享 它 。 服 务 

通常 就 是 一 个 普通 的 JavaScript 对 象 ， 因 此 更 抽象 地 说 ， 我 们 需要 的 是 一 个 能 支持 互 操 作 
的 依赖 注入 系统 。 

Q 变更 检测 : 如 果 我 们 在 某 一 边 进 行 了 改动 ， 这 些 变 更 也 应 该 能 传播 到 男 一 边 。 

Angular 提 供 了 所 有 这 些 场景 的 解决 方案 ， 本 章 将 一 一 讲解 。 

在 本 章 中 ， 我 们 会 : 

口 描述 即将 升级 的 AngularJS 应 用 ; 

o 解释 如 何 用 Angular 的 UpgradeAdapter 来 组 织 混 合式 应 用 ; 

口 通过 把 AngularJS 应 用 转化 成 混合 式 应 用 来 一 步 步 解 释 如 何在 AngularJS 和 Angular 中 共享 

组 件 (指令 ) 与 服务 。 








































































































16.5 AngularJS 应 用 
作为 准备 ， 我 们 先 重 温 一 下 该 应 用 的 AngularJS 版 本 。 
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本 章 假 设 你 已 经 具备 了 关于 AngularJS 和 ui-router" 的 知识 。 如 果 你 对 AngularJS 
感到 吃力 ， 请 先 阅读 《AngularJS 权 成 教程 》”。 

我 们 不 会 深入 剖析 和 解释 每 个 AngularJS 的 概念 ， 只 会 回顾 一 下 这 个 准备 升级 到 
Angular/ 混 合式 应 用 的 结构 。 


要 运行 AngularJS 应 用 ， 使 用 cdq 转 到 示例 代码 中 的 conversion/AngularJS ， 安 装 依赖 ， 并 运 
行 该 应 用 : 


cd code/conversion/AngularJS # change directories 
npm install # install dependencies 
npm run go # run the app 


如 果 没 有 自动 打开 浏览 器 ， 请 手动 打开 URL: http//localhost:8080., 


在 该 应 用 中 , 你 可 以 看 到 用 户 正 在 收集 的 小 玩偶 。 我 们 可 以 把 鼠标 移 到 某 个 条 目 上 , 并 点 击 
红心 图 标 来 收藏 一 个 图 钉 ， 如 图 16-3 所 示 。 





Monkey Puppet - My wife's handmade. for 
daughter. 





P 3 MIKI Yoshihito ("+w") 


图 16-3 ”红心 表示 已 收藏 的 图 钉 
我 们 还 可 以 导航 到 /adq 页 ， 并 添加 一 个 新 的 图 钉 。 试 试 提 交 这 个 默认 表单 。 








处 理 图 片上 传 对 于 这 个 演示 来 说 过 于 复杂 了 。 目 前 ， 如 果 你 想 换 一 幅 图 ， 只 要 
粘贴 一 幅 图 片 的 完整 URL 即 可 。 


(D https://github.com/angular-ui/ui-router 
@ http://ng-book.com 
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16.5.1 AngularJS 应 用 的 HTML 
AngularJS 应 用 中 的 index.html 使 用 了 一 种 常用 的 结构 。 








code/conversion/AngularJS/index.html 


<!DOCTYPE html» 
«html ng-app-'interestApp'» 
«head» 
«meta charset-"utf-8"» 
«title»Interest«/title» 
<link rel="stylesheet" href="css/bootstrap.min.css"> 
<link rel="stylesheet" href="css/sf.css"> 
<link rel="stylesheet" href="css/interest.css"> 
</head> 
«body class="container-fullwidth"> 


«div class-"page-header"» 
«div class="container"> 
«hi»Interest «small»what you're interested in«/small»«/h1» 


«div class-"navLinks"» 
<a ui-sref-'home' id="navLinkHome">Home</a> 
<a ui-sref-'add' id-"navLinkAdd"»Add«/a» 
«/div» 
«/div» 
«/div» 


«div id="content"> 
«div ui-view-z' »«/div» 
«/div» 


«script src="js/vendor/lodash. js"></script> 

«script src="js/vendor/angular. js"></script> 

«script src-z"js/vendor/angular-ui-router. js"></script> 

«script src="js/app. js"></script> 
</body> 
</html> 
Q 注意 ,我 们 在 ntml 标 签 中 使 用 ng-app 来 指定 该 应 用 所 用 的 是 interestApp 模 块 。 
a 我 们 在 body 的 底部 使 用 script 标 签 来 加 载 JavaScript 脚 本 。 
a 该 模板 包含 一 个 page-header 指 令 ， 这 里 是 我 们 的 导航 栏 。 
O 我 们 使 用 了 ui-router ， 这 意味 着 : 

m 使 用 ui-sref 来 表示 链接 ( Home 和 Add ); 

mu 我 们 和 希望 路 由 需 把 内 容 放 在 ui-view 中 。 





















































16.5.2 ”代码 概览 
我 们 将 遍历 代码 中 的 每 个 部 分 。 不 过 首先 来 简单 描述 一 下 这 些 活动 部 件 。 
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在 我 们 的 应 用 中 ， 有 两 个 路 由 : 


口 /使 用 HomeController; 
口 /add 使 用 AddController。 





我 们 用 一 个 PinsService 来 存放 所 有 现 有 
AddController 把 新 的 元 素 添加 到 列表 中 。 





图 钉 的 数组 。HomeController 演 染 出 图 钉 列表 , 而 





我 们 的 根 路 由 使 用 HomeController 来 演 染 这 些 图 钉 ， 而 我 们 用 pin 指 令 来 演 染 单个 图 钉 。 
PinsService 用 于 存放 应 用 中 的 数据 ， 所 以 先 来 看 看 它 。 


16.5.3 AngularJS: PinsService 


code/conversion/AngularJS/js/app.js 


angular.module('interestApp', ['ui.router']) 


.service('PinsService', function($http, $q) { 
this._pins = null; 


this.pins = function() { 
var self = this; 
if(self._pins == null) { 
// initialize with sample data 
return $http.get("/js/data/sample-data. json") .then( 
function(response) { 
self._pins = response.data; 
return self._pins; 


}) 
} else { 
return $q.when(self._pins); 
} 
j 


this.addPin = function(newPin) { 
// adding would normally be an API request so lets mock async 
return $q.when( 

this. pins.unshift(newPin) 

); 
j 

}) 





PinsService 是 一 个 














.service， 它 把 这 些 图 钉 的 数组 保存 在 属性 _.pins 中 。 


.pins 方 法 返回 一 个 承诺 ， 它 会 被 解析 (resolve) 成 一 个 图 钉 列 表 。 如 果 _.pins 为 null (也 
就 是 首次 访问 时 )， 我 们 就 会 从 /js/data/sample-data.json 中 加 载 示例 数据 。 








code/conversion/AngularJS/js/data/sample-data.json 


| C 
{ 
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"title": "sock puppets", 
"description": "from:\nThe FunCraft Book of Puppets\n1976\nISBN: 0-590-11936N 


zo. 

"user name": "tofutti break", 
"avatar src": "images/avatars/428263030N00. jpg", 
"src": "images/pins/106033588 1678811702 o.jpg", 
"url": "https://www.flickr.com/photos/tofuttibreak/106033588/", 
"faved": false, 
"id": "106033588" 

}, 

{ 
"title": "Puppet play.", 
"description": "My wife's handmade." 
"user name": "MIKI Yoshihito (“w)", 
"avatar src": "images/avatars/7940758@NQ7. jpg", 
"src": "images/pins/44225'75066. Td5c4c44e'f o. jpg", 
"url": "https://www.flickr.com/photos/mujitra/44225'75066/", 
"faved": false, 
"id": "4422575066" 

}, 

{ 
"title": "easy to make puppets - oliver owl (detail)", 
"description": "from easy to make puppets by joyce luckin (1975)", 
"user_name": "gilliflower", 
"avatar src": "images/avatars/26265986@N@0. jpg", 
"src": "images/pins/6819859064. 25d05ef2e1 o. jpg", 
"url": "https://www.flickr.com/photos/gilliflower/6819859061/", 
"faved": false, 
"id": "6819859061" 

}, 


.addPin 方 法 把 一 个 新 图 钉 加 入 到 图 钉 数 组 中 。 在 这 里 ， 我 们 使 用 $q.when 来 返回 一 个 承诺 ， 
就 像 我 们 真 的 向 一 台 服务 器 发 起 异步 调用 时 一 样 。 





16.5.4 AngularJS: 配置 路 由 
我 们 准备 用 ui-router 来 配置 这 些 路 由 。 


























如 果 你 还 不 熟悉 ui-router ， 请 到 https://github.com/angular-ui/ui-router/wiki 阅 读 
文档 。 











正如 前 面 所 说 ， 我 们 有 两 个 路 由 。 


code/conversion/AngularJS/js/app.js 











.config(function($stateProvider, $urlRouterProvider) { 
$stateProvider 
.state('home', { 
templateUrl: '/templates/home.html', 
controller: 'HomeController as ctrl', 
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url tyt 
resolve: { 
'pins': function(PinsService) { 
return PinsService.pins(); 
} 
j 


}) 
.state('add', { 
templateUrl: '/templates/add.html', 
controller: 'AddController as ctrl', 
url: '/add', 
resolve: ( 
'pins': function(PinsService) { 
return PinsService.pins(); 
j 
! 
}) 


$urlRouterProvider.when('', '/') ; 


}) 


第 一 个 路 由 /被 映射 到 了 Homecontroller ， 我 们 很 快 就 会 看 到 它 的 模板 。 注 意 ， 我 们 还 在 使 
JH ui-router 的 resolve 功能。 这 表示 在 为 用 户 加 载 此 路 由 之 前 ， 我 们 希望 先 调用 
PinsService.pins(), 并 且 把 结果 (图钉 列表 ) HEA RITE HAE (HomeController ). 


/add 路 由 与 之 类 似 ， 只 是 使 用 了 另 一 套 模板 和 控制 器 。 
我 们 首先 看 看 HomeController。 
































16.5.5 AngularJS: HomeController 


HomeController 很 简明 。 我 们 把 通过 resolve 注 和 人 进来 的 pins 保 存 到 $scope.pins 中 。 


code/conversion/AngularJS/js/app.js 


.controller('HomeController', function(pins) { 
this.pins = pins; 


}) 


16.5.6 AngularJS: HomeController 模板 


首页 的 模板 很 小 : 我 们 用 ng-repeat 来 循环 $scope .pins 中 的 图 钉 , 然后 用 pin 指 令 来 演 染 出 
每 个 图 钉 。 








code/conversion/AngularJS/templates/home.html 


«div class="container"> 
«div class="row"> 
«pin item="pin" ng-repeat-"pin in ctrl.pins"» 
«/pin» 
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</div> 
</div> 


下 面 深 入 看 看 这 个 pin 指 令 。 


16.5.7 AngularJS: pin 指令 








pin 指 令 被 限制 (restrict) 为 匹配 元 素 (E )， 并 有 日 具有 一 个 template。 
我 们 可 以 通过 item 属 性 把 pin 传 进去 ， 就 像 在 home.html 模 板 中 所 做 的 那样 。 
link 函 数 在 定义 域 上 定义 了 一 个 名 叫 toggleFav 的 函数 ， 它 会 来 回 切换 图 钉 的 faved 属 性 。 























code/conversion/AngularJS/js/app.js 
}) 


.directive('pin', function() { 
return { 

restrict: 'E', 

templateUrl: '/templates/pin.html', 

scope: { 
'pin': "=item" 

}, 

link: function(scope, elem, attrs) { 
scope.toggleFav = function() { 

scope.pin. faved = !scope.pin. faved; 


Q, 到 2016 年 ， 该 指令 已 经 不 能 再 作为 指令 最 佳 实践 的 示例 了 。 比 如 ， 要 想 在 
AngularJS 中 写 一 个 全 新 的 指令 ， RARA VA AngularJS.5 P # 4 . component & 
数 。 至 少 ， 我 会 用 controllerAs 来 代替 link。 
但 本 节 并 不 是 讲解 该 如 何 写 好 AngularJS 代 码 的 ， 而 是 展示 如 何 迁 移 现 有 的 
AngularJS 代 码 。 


16.5.8 AngularJS: pin 指令 模板 
templates/pin.html 模 板 在 我 们 的 页 面 中 泻 染 了 一 个 单独 的 图 钉 。 


code/conversion/AngularJS/templates/pin.html 


«div class="col-sm-6 col-md-4"» 
«div class="thumbnail"> 
«div class="content"> 
<img ng-src="{{pin.src}}" class-"img-responsive"» 
<div class="caption"> 


16.5 AngularJS 应 用 463 





<h3>{{pin.title}}</h3> 
<p>{{pin.description | truncate:100}}</p> 
</div> 
<div class="attribution"> 
<img ng-src="{{pin.avatar_src}}" class="img-circle"> 
<h4>{{pin.user_name}}</h4> 
</div> 
</div> 
«div class="overlay"> 
<div class="controls"> 
<div class="heart"> 
«a ng-click="toggleFav()"> 
<img src="/images/icons/Heart-Empty.png" ng-if="!pin. faved"></img> 
<img srcz"/images/icons/Heart-Red.png" ng-if="pin. faved"></img> 
</a> 
</div> 
</div> 
</div> 
</div> 
</div> 


我 们 在 这 里 用 到 的 指令 都 是 AngularJS 的 内 置 指令 : 
口 用 ng-src 来 泻 染 img; 

口 接着 显示 pin.title 和 pin.description; 

口 用 ng-if 来 决定 是 显示 红心 还 是 空心 。 


这 里 最 有 意思 的 是 ng-click, 它 会 调用 toggleFav， 而 toggleFav 会 修改 pin. faved 属 性 , 应 
用 从 而 据 此 显示 红心 或 空心 ( 如 图 16-4 所 示 )。 


























Q 


图 16-4 ”红心 与 空心 


接 下 来 ， 我 们 看 看 AddController。 





16.5.9 AngularJS: AddController 


这 个 AddController 比 HomeController 的 代码 要 多 一 点 ,我 们 从 定义 控制 器 并 指定 要 注入 的 
服务 开始 。 


code/conversion/AngularJS/js/app.js 





.controller('AddController', function($state, PinsService, $timeout) { 
var ctrl = this; 
ctrl.saving = false; 
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我 们 在 路 由 器 和 模板 中 使 用 了 controllerAs 语 法 。 这 意味 着 我 们 把 属性 放 在 了 this 上 ， 而 
不 是 $scope 上 。this 的 作用 域 在 ES5 JavaScript 上 有 点 复杂 ， 所 以 我 们 指定 var ctrl = this;, 
以 消除 在 艇 套 的 函数 中 引用 该 控制 器 时 可 能 出 现 的 歧义 。 


code/conversion/AngularJS/js/app.js 





var makeNewPin = function() { 
return { 
"title": "Steampunk Cat", 
"description": "A cat wearing goggles", 
"user name": "me", 
"avatar src": "images/avatars/me. jpg", 
"src": "/images/pins/cat. jpg", 
"url": "http://cats.com", 
"faved": false, 
"id": Math.floor(Math.random() * 10000).toString() 
j 
j 


ctrl.newPin - makeNewPin(); 

我 们 创建 了 一 个 makeNewPin 函 数 ， 它 包含 了 图 钉 的 默认 构造 函数 和 数据 。 

我 们 还 通过 把 ctr1 .newPin 属 性 设置 为 该 函数 的 调用 结果 初始 化 了 该 控制 器 。 
， 我 们 要 定义 一 个 函数 来 提交 新 图 钉 。 

code/conversion/AngularJS/js/app.js 



































ctrl.submitPin = function() { 
ctrl.saving = true; 
$timeout(function() { 
PinsService.addPin(ctrl.newPin).then(function() [f 
ctrl.newPin - makeNewPin(); 
ctrl.saving - false; 
$state.go('home'); 
$35 
}, 2000); 
} 
}) 


本 质 上 ， 该 文档 调用 PinsService.addPin 创 建 了 一 个 新 的 图 钉 。 不 过 这 里 还 做 了 一 些 别 的 





lm. 
" 

ms 

ft 





在 真实 的 应 用 中 , 这 类 操作 几乎 总 会 向 服务 器 发 起 一 次 调用 。 这 里 我 们 使 用 $timeout 来 模拟 
此 效果 。( 实际 上 ， 你 也 可 以 移 除 $timeout 函数 ， 程 序 仍 然 能 正常 工作 。 在 这 里 调用 它 是 为 了 延 
绥 程 序 的 响应 速度 ， 让 我 们 有 机 会 看 见 Saving... 提 示 。) 


我 们 要 给 用 户 一 些 提示 ， 好 让 他 们 知道 我 们 正在 保存 图 钉 ， 因 此 设置 ctrl.saving = true. 
我 们 调用 PinsService.addPin, 并 把 ctr1.newPin 传 给 它 。addPin 会 返回 一 个 承诺 , 我 们 在 
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这 个 承诺 的 回调 函数 中 : 
(1) 把 ctrl .newPin 恢 复 成 原始 值 ; 
(2) 把 ctr1.saving 设 置 为 false， 因 为 已 经 保存 好 了 图 钉 ; 
(3) 使 用 $state 服 务 把 用 户 重 定向 到 首页 去 ， 在 那里 可 以 看 到 新 的 图 钉 。 


下 面 是 Addcontroller 的 完整 代码 。 











code/conversion/AngularJS/js/app.js 


.controller('AddController', function($state, PinsService, $timeout) { 
var ctrl = this; 
ctrl.saving = false; 


var makeNewPin = function() { 
return { 
"title": "Steampunk Cat", 
"description": "A cat wearing goggles", 
"user name": "me", 
"avatar src": "images/avatars/me. jpg", 
"src": "/images/pins/cat. jpg", 
"url": "http://cats.com", 
"faved": false, 
"id": Math.floor(Math.random() * 10000).toString() 
j 
j 


ctrl.newPin - makeNewPin(); 


ctrl.submitPin = function() { 
ctrl.saving - true; 
$timeout(function() { 
PinsService.addPin(ctrl.newPin).then(function() { 
ctrl.newPin - makeNewPin(); 
ctrl.saving - false; 
$state.go('home'); 
1); 
}, 2000); 
} 
}) 


16.5.10 AngularJS: AddController 模板 


/add 路 由 会 泻 染 add.html 模 板 。 





466 % 16% 4e AngularJS 应 用 升级 到 Angular 





© SO | [ng-book2: interest x ee) 








E Œ | D localhost:8080/#/add vie 





Interest what you're interested in 


Home Add 


Title Steampunk Cat 

Description Acat wearing goggles 
Link URL http://cats.com 

Image URL Jimages/pins/cat.jpg 


Submit 











图 16-5 ”新 增 图 钉 的 表单 
该 模板 使 用 ng-mode1l 来 把 input 标 签 绑 定 到 控制 器 上 的 newPin 属 性 。 
这 里 值得 关注 的 是 : 
a 我 们 在 提交 按钮 上 使 用 ng-click 来 调用 ctr1 .submitPin; 
O 如 果 ctr1.saving 为 真 ， 那 么 就 要 显示 一 条 Saving… 消 息 。 
































code/conversion/AngularJS/templates/add.html 


«div class="container"> 
«div class="row"> 


«form class-"form-horizontal"» 


«div class-"form-group"» 
«label for="title" 
class-"col-sm-2 control-label"»Title«/label» 
«div class-"col-sm-10"» 

«input type="text" 
class-"form-control" 
id-"title" 
placeholder="Title" 
ng-modelz"ctrl.newPin.title"» 

«/div» 
«/div» 


«div class-"form-group"» 
«label for="description" 


class-"col-sm-2 control-label"»Description</label> 
«div class-"col-sm-10"» 
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<input type="text" 
class="form-control" 
id="description" 
placeholder="Description" 
ng-modelz"ctrl.newPin.description"» 
«/div» 
«/div» 


«div class-"form-group"» 
«label for-"url" 
class-"col-sm-2 control-label"»Link URL«/label» 
«div class-"col-sm-10"» 

«input type="text" 
class-"form-control" 
ids"url" 
placeholder="Link URL" 
ng-modelz"ctrl.newPin.url"» 

«/div» 
«/div» 


«div class-"form-group"» 
«label for="url" 
class-"col-sm-2 control-label"»Image URL«/label» 
«div class-"col-sm-10"» 

«input type="text" 
class="form-control" 
id-"url" 
placeholder="Image URL" 
ng-modelz"ctrl.newPin.src"» 

«/div» 
«/div» 


«div class-"form-group"» 
«div class="col-sm-offset-2 col-sm-10"» 
«button type="submit" 
class="btn btn-default" 
ng-clickz"ctrl.submitPin()"»Submit«/button» 
«/div» 
«/div» 
«div ng-if="ctrl.saving"> 
Saving... 
«/div» 
«/ form» 


«/div» 
«/div» 


16.5.11 AngularJS: 总 结 
我 们 终于 有 了 要 升级 的 AngularJS 应 用 。 该 应 用 的 复杂 度 正好 能 让 我 们 演示 如 何 向 Angular 迁 移 。 Cm 





468 % 16% 把 AngularJS 应 用 升级 到 Angular 


16.6 ”构建 混合 式 应 用 
现在 ， 我 们 已 经 为 往 现 有 的 AngularJS 应 用 中 引入 一 些 Angular 的 技术 作 好 了 准备 。 
开始 在 浏览 器 中 使 用 Angular 之 前 ， 我 们 需要 对 应 用 的 结构 进行 一 些 调整 。 











Q, 你 可 以 在 code/conversion/hybrid 找 到 这 些 示例 代码 。 


16.6.1 混合 式 应 用 的 结构 

创建 混合 式 应 用 的 第 一 步 是 确保 你 同时 加 载 了 AngularJS 和 Angular 的 依赖 。 不 过 每 个 人 遇 到 
的 具体 情况 可 能 会 略 有 不 同 。 

在 这 个 例子 中 ， 我 们 已 经 提供 了 AngularJS 的 库 ( 在 js/vendor 中 )。 接 下 来 还 要 从 npm 中 加 载 
Angular 的 库 。 

在 你 的 项 目 中 ， 可 能 需要 同时 提供 这 两 个 库 ， 比 如 使 用 Bower "等 。 不 过 对 于 Angular 来 说 ， 
用 npm 更 省 事 ， 而 且 我 们 也 建议 使 用 npm 来 安装 Angular。 





























1. 用 package.json 指 定 依赖 
你 可 以 通过 npm 来 根据 文件 packagejson 安 装 依 顿 。 下 面 是 这 个 混合 式 应 用 例子 中 的 


package.json. 




















code/conversion/hybrid/package.json 


{ 
"name": "ng-hybrid-pinterest", 
"version": "0.0.1", 
"description": "toy pinterest clone in AngularJS/Angular hybrid", 
"contributors": [ 
"Nate Murray <nate@fullstack.io>", 
"Felipe Coury «felipeGOng-book.com»" 
], 
"main": "index.js", 
"private": true, 
"scripts": { 
"clean": "rm -f ts/x.js ts/*.js.map ts/components/x. js ts/components/x.js.ma\ 
p ts/services/x.js ts/services.js.map", 
"tsc": "./node modules/.bin/tsc", 
"tsc:w": "./node modules/.bin/tsc -w", 
"serve": "./node modules/.bin/live-server --host-localhost --port-8080 .", 
"e2e:serve": "npm run tsc && ./node modules/.bin/live-server --host-localhosN 


t --port-8080 --no-browser .", 





® http://bower.io/ 
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go": "concurrent \"npm run tsc:w\" \"npm run serve\" " 

du 

"dependencies": { 
"@angular/common": "2.4.1", 
"@angular/compiler": "2.4.1", 
"@angular/core": "2.4.1", 
"@angular/forms": "2.4.1", 
"@angular/http": "2.4.1", 
"Gangular/platform-browser": "2.4.1", 
"Gangular/platform-browser-dynamic": "2.4.1", 
"@angular/router": "3.4.1", 
"@angular/upgrade": "2.0.0-rc.6", 
"@types/ jasmine": "2.5.40", 
"core-js": "2.4.1", 
"es6-shim": "0.35.0", 
"reflect-metadata": "0.1.9", 
"rxjs": "5.0.2", 
"systemjs": "0.19.6", 
"ts-helpers": "1.1.1", 
"tslint": "3.7.0-dev.2", 
"typings": "0.8.1", 
"zone.js": "0.7.4" 

sy 

"devDependencies": { 
"Qtypes/jasmine": "2.2.30", 
"Otypes/node": "6.0.42", 








"concurrently": "1.0.0", 
"jasmine-spec-reporter": "2.5.0", 
"karma": "0.12.22", 
"karma-chrome-launcher": "0.1.4", 
"karma-jasmine": "0.1.5", 
"live-server": "0.9.0", 
"protractor": "4.0.14", 
"ts-node": "4.2.1", 

"typescript": "2.0.3" 


如 果 你 不 熟悉 其 中 的 菜 个 包 ， 最 好 自己 去 发 现 它 的 用 途 。 上 比如 rxjs 是 一 个 为 我 
们 提供 可 观察 对 象 的 库 ， 而 systemjs 提 供 的 是 模块 加 载 器 ， 我 们 将 在 本 章 中 用 
到 它 。 

一 旦 添加 了 Angular 的 依赖 ， 就 可 以 运行 npm install 命 令 来 安装 它们 了 。 

2. 编译 代码 


你 可 能 注意 到 了 ,package.json 中 的 "script" 属 性 中 包含 男 一 个 属性 "tsc"。 这 表示 当 我 们 运 
行 命令 npm run tsc 时 ， 它 就 会 调用 TypeScript 编 译 右 来 编译 我 们 的 代码 。 


我 们 准备 在 这 个 例子 中 使 用 TypeScript， 同 时 AngularJS 的 代码 仍然 使 用 JavaScript。 
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要 这 么 做 ， 就 要 先 把 所 有 TypeScript 代 码 放 进 ts/ 文 件 夹 里 ， 把 所 有 JavaScript 代 码 放 进 js/ 文 件 


夹 里 。 











我 们 用 tsconfig.json 文 件 来 配置 TypeScript 编 译 僻 。 关 于 此 文件 ， 现 在 你 只 要 知道 一 点 就 可 以 


了 : filesG 


我 们 希望 编译 ts/ 目 录 下 所 有 以 .ts 结尾 的 文件 ”。 


在 该 项 






































1ob 属 性 指定 了 适 配 规则 "./ 人 ts/*xx/x* .ts"。 它 的 意思 是 “ 当 运 行 TypeScript 编 译 需 时 ， 

















目 中 ,浏览 器 只 会 加 载 JavaScript。 因 此 我 们 要 使 用 TypeScript 编 译 器 (tse ) 来 把 这 些 








代码 编译 成 JavaScript， 然 后 再 把 AngularJS 和 Angular 的 JavaScript 代 码 加 载 进 浏 览 器 中 。 
3. 加 载 index.html 依 赖 


现在 ， 我 们 已 经 设置 好 了 依赖 和 编译 器 ， 接 着 就 要 把 这 些 JavaScript 文 件 加 载 到 浏览 器 中 了 。 
因此 ， 我 们 添加 script 标 签 。 


























code/conversion/AngularJS/hybrid/index.html 


«div id="content"> 

«div ui-view=''»></div> 
</div> 
<!-- Libraries --» 
«script src-"node modules/core-js/client/shim.min.js"»«/script» 
«script src="node_modules/zone. js/dist/zone. js"></script> 
«script src-"node modules/reflect-metadata/Reflect.js"»«/script» 
«script src-"node modules/systemjs/dist/system.src.js"»«/script» 
«script srcz"js/vendor/angular.js"»«/script» 
«script srcz"js/vendor/angular-ui-router. js"></script> 





我 们 从 node_ modules/ 中 加 载 的 文件 是 Angular 及 其 依赖 ， 而 从 js/vendorv 中 加 载 的 文件 则 是 








AngularJS 及 其 依赖 。 
但 是 你 可 能 已 经 注意 到 了 ,我 们 还 没有 在 HTML 标 签 中 加 载 任何 自己 的 代码 。 要 加 载 这些 代 





码 ， 就 要 使 用 System.js。 
4. 配置 System.js 
在 这 个 例子 中 ， 我 们 准备 把 System.js 用 作 模 块 加 载 器 。 


e 














我 们 还 可 以 使 用 webpack (就 像 在 本 书 其 他 例子 中 所 用 的 那样 ) 或 很 多 其 他 的 加 
AR (比如 requirejs 等 )。 不 过 ，System.js 是 一 个 很 不 错 并 且 具 有 可 伸缩 性 的 加 
载 器 ， 常 常 和 Angular 一 起 使 用 。 本 章 会 提供 一 个 漂亮 的 示例 ， 向 你 展示 如 何 通 
过 System.js 使 用 Angular。 


要 配置 System.js， 需 要 在 index.html 的 cscript> 标 签 中 进行 如 下 修改 
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<script src-"resources/systemjs.config.js"»«/script» 
System.import('ts/app.js') 
.then(null, console.error.bind(console)); 


System. import('ts/app.js') 说 明 该 应 用 的 入 口 点 是 ts/app.js 文 件 。 当 我 们 写 混合 式 Angular 
应 用 时 ，Angular 的 代码 会 成 为 入 口 点 。 这 很 容易 理解 ， 因 为 Angular 提 供 了 对 AngularJS 的 向 后 兼 
容 能 力 。 我 们 很 快 就 会 看 到 如 何 引 导 该 应 用 。 
这 里 要 注意 的 另 一 个 问题 是 , 我 们 正在 ts/ 目 录 下 加 载 .js 文件 。 为 什么 呢 ? 这 是 因为 TypeScript 
译 器 会 在 页 面 加 载 时 把 这 些 文件 编译 成 JavaScript。 
我 们 已 经 在 resources/systemjs.config.js 中 配置 好 了 System.js。 此 文件 中 包含 了 几乎 标准 化 的 配 
置 方式 ， 但 现在 我 们 要 把 AngularJS 应 用 加 载 到 Angular 代 码 中 ， 那 就 不 得 不 添加 一 个 特殊 的 属性 
interestAppNg1 了 ， 它 指向 我 们 的 AngularJS 应 用 。 该 选项 让 我 们 能 在 TypeScript 代 码 中 这 样 用 : 


import 'interestAppNgi'; // "bare import" for side-effects 
当 模 块 加 载 右 看 到 字符 串 ' interestAppNg1 ' 时 ， 就 会 去 Jis/app.js 中 加 载 我 们 的 AngularJS 应 用 。 


packages 属 性 指出 ts 包 (package ) 中 的 文件 将 会 具有 .js 扩展 名 ， 并 使 用 System.js 来 注册 
(register ) 这 种 模块 格式 。 
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Q, TypeScript 编 译 器 可 以 输出 多 种 模块 格式 。System.js 的 format 需 要 与 编译 器 输出 
的 模块 格式 保持 一 致 。 这 里 register 的 模块 格式 之 所 以 能 直接 使 用 ， 是 因为 我 
们 在 tsconfig.json 中 把 compilerOptions.module 指 定 成 了 "system" 格 式 。 


A 要 配置 好 System.js 是 很 难 的 ， 有 大 量 潜在 选项 。 
这 不 是 一 本 关于 模块 加 载 器 的 书 ， 事 实 上 ， 只 是 深入 讲解 如 何 配 置 System.js 和 
其 他 JavaScript 模 块 加载 器 就 足够 写 一 整 本 书 了 。 
目前 ， 我 们 不 准备 深入 讨论 模块 加 载 器 ， 不 过 如 果 你 想 了 解 更 多 ， 请 参阅 
https://github.com/systemjs/systemjs/blob/master/docs/config-api.md. 


O 你 想 阅读 关于 JavaScript 模 块 加 载 器 的 书 吗 ? 我 们 正在 考虑 写 一 本 。 如 果 你 想 及 
时 收 到 通知 ， 请 在 这 里 留 下 你 的 邮箱 : http://eepurl.com/bMOaEX. 


16.6.2 引导 混合 式 应 用 
现在 项 目 结构 已 经 就 绪 ， 我 们 来 启动 这 个 应 用 吧 。 
还 记得 吗 ?” 在 AngularJS 中 ， 有 两 种 方式 可 以 启动 应 用 : 


(]) 使 用 ng-app 指 令 ， 比如 在 HTML 中 写 ng-app='interestApp ; 
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(2) 在 JavaScript 中 使 用 angular .bootstrap。 

在 混合 式 应 用 中 ， 我们 要 使 用 来 自 UpgradeAdapter 的 新 引导 方法 。 

我 们 还 要 改 为 从 代码 中 启动 应 用 ， 因 此 请 确保 从 index.html 中 移 除 了 ng-app 指 令 。 
一 个 最 简 的 启动 代码 是 这 样 的 : 


// code/conversion/hybrid/ts/app.ts 

import { 

NgModule, 

forwardRef 

} from 'Gangular/core'; 

import { CommonModule } from '@angular/common' ; 

import { BrowserModule } from '@angular/platform-browser' ; 





import { UpgradeAdapter } from '@angular/upgrade' ; 
declare var angular: any; 
import 'interestAppNg1'; // "bare import" for side-effects 





/* 
* Create our upgradeAdapter 
*/ 
const upgradeAdapter: UpgradeAdapter = new UpgradeAdapter ( 
forwardRef(() => MyAppModule)); // <-- notice forward reference 


LT 3: 
// upgrade and downgrade components in here 


Lf eg 


/* 
* Create our app's entry NgModule 
*/ 
@NgModule( { 
declarations: [ MyNg2Component, ... ], 
imports: [ 
CommonModule, 
BrowserModule 


l, 


providers: [ MyNg2Services, ... ] 


}) 
class MyAppModule { } 


/* 
* Bootstrap the App 
*/ 
upgradeAdapter .bootstrap(document.body, ['interestApp']); 


我 们 先导 入 了 UpgradeAdapter hae iA 然后 创建 它 的 实例 upgradeAdapter。 


不 过 ，UpgradeAdapter 的 构造 函数 需要 一 个 NgModule ， 它 用 于 启动 我 们 的 Angular 应 用 ， 但 
我 们 还 没有 定义 它 呢 ! 要 解决 这 个 问题 , 就 用 forwardRef 哨 数 来 取得 NgModule 的 “前 向 引用 ”( 后 
面 会 声明 它 ) 
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当 我 们 定义 自己 的 NgModule 也 就 是 MyAppModule 时 (具体 到 这 个 应 用 中 ， 它 应 该 是 
InterestAppModule )， 写 法 和 定义 其 他 Angular 的 NgModule 没 有 区 别 : 我 们 放 进 了 声明 
(declarations )、 导 入 (imports ) 和 提供 者 (providers ) 等 。 


最 后 ， 我 们 告诉 upgradeAdapter 在 document .bodqy 元 素 上 bootstrap 此 应 用 ， 并 指定 了 
AngularJS 应 用 的 模块 名 。 


这 将 会 在 启动 Angular 应 用 的 同时 启动 AngularJS 应 用 ! 接 下 来 ， 我 们 就 开始 一 点 一 点 地 用 
Angular fi o 


16.6.3 ”我 们 要 升级 什么 


先 来 讨论 一 下 这 个 例子 中 的 哪些 部 分 需要 迁移 到 Angular， 哪 些 仍 然 留 在 AngularJS 。 
1. 首页 


需要 注意 的 第 一 点 是 ， 我 们 仍 将 使 用 AngularJS 来 管理 路 由 。 当 然 ，Angular 有 自己 的 路 由 ， 
你 可 以 在 第 7 章 中 读 到 它 。 但 是 如 果 你 正在 构建 一 个 混合 式 应 用 ， 很 可 能 已 经 用 AngularJS 配 置 过 
很 多 路 由 了 。 因 此 ， 在 这 个 例子 中 ， 我 们 仍然 沿用 ui-router 作 为 路 由 体系 。 


在 首页 中 , 我 们 准备 把 Angular 的 组 件 骨 套 在 AngularJS 的 指令 中 。 在 这 个 例子 中 , 就 是 把 “图 
钉 控件 ”转变 成 Angular 的 组 件 (如 图 16-6 所 示 也 就 是 说 ， 我 们 的 pin 指 令 将 调用 Angular 的 
pin-controls 组 件 ， 而 pin-controls 组 件 负责 泻 染 出 用 来 表示 收藏 的 心 型 图 标 。 























jooo, 中 ng-book 2: Interest x [xs à 








Best rens om) (Qual Pony 
sock puppets from: The FunCraft Book of Puppet play. My wife's handmade. easy to make puppets - oliver owl (detail) from 
Puppets 1976 ISBN: 0-590-11936-2 easy to make puppets by joyce luckin (1975) 


mo 


D tofutti break & MIKI Yoshihito (' *c9*) > gilliflower 
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尽管 这 是 一 个 很 小 的 例子 , 但 它 展示 了 一 种 强 有 力 的 想法 : 如 何在 ng 的 不 同 版 本 之 间 无 缝 地 
2. About 页 


我 们 也 会 在 About 页 上 使 用 AngularJS 来 实现 路 由 和 页 眉 。 不 过 ， 在 About 页 上 ， 我 们 将 把 整 
个 表单 蔚 换 成 Angular 的 组 件 : AddPinComponent (如 图 16-7 所 示 )。 











Description Acat wearing goggles 


Link URL http://cats.com 


ImageURL  /images/pins/catjpg 








图 16-7 About 页 的 AngularJS 和 Angular 组 件 
回想 一 下 ， 该 表单 会 往 PinsService 上 添加 一 个 新 的 图 钉 。 在 这 个 例子 中 ， 我 们 需要 通过 某 
种 方式 来 让 Angular 的 AddPinComponent 访 问 到 AngularJS 的 PinsService。 


另外 , 在 添加 新 的 图 钉 之 后 ， 该 应 用 应 该 自动 导航 到 首页 。 不 过 ， 要 想 改 变 当 前 路 由 ,我 们 
需要 在 Angular 的 AddPinComponent 中 使 用 来 自 AngularJS 中 ui-router 库 的 $state 服 务 。 因 此 , 我 
们 同样 需要 确保 $state 服 务 也 能 在 AddPincomponent 中 使 用 。 


3. 服务 
我 们 刚才 说 过 ， 有 两 个 AngularJS 的 服务 将 会 升级 到 Angular: 


LU PinsService 
O $state 


不 过 我 们 也 想 看 看 如 何 把 一 个 Angular 服 务 降级 ， 以 供 AngularJS 使 用 。 为 此 ， 我 们 稍 后 会 用 
TypeScripVAngular 来 创建 一 个 AnalyticsService 服 务 ， 并 把 它 共 享 给 AngularJS 。 


4. 盘点 
概括 起 来 ， 我 们 准备 讲解 下 列 内 容 : 
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O 把 Angular 的 PinControlsComponent 降 级 到 AngularJS( 用 来 实现 收藏 按钮 ); 
O 把 Angular 的 AddPinComponent 降 级 到 AngularJS( 用 来 实现 新 增 图 钉 页 面 ); 
O 把 Angular 的 AnalyticsService 降 级 到 AngularJS ( 用 来 进行 事件 记录 ); 

O 把 AngularJS 的 PinsService 升 级 到 Angular ( 用 来 新 增 图 钉 ); 

O 把 AngularJS 的 $state 服 务 升级 到 Angular ( 用 来 控制 路 由 )。 























16.6.4 ” 插 一 小 段 内 容 : 类 型 文件 

TypeScript 最 美妙 的 一 点 就 是 编译 时 类 型 检查 。 不 过 ， 如 果 你 正在 构建 一 个 混合 式 应 用 ， 那 
么 估计 你 打算 集成 到 项 目 中 的 JavaScript 代 码 大 部 分 是 无 类 型 的 。 

当 你 试图 在 TypeScript 中 使 用 JavaScript 代 码 时 ， 可 能 会 收 到 编译 器 错误 ， 因 为 编译 器 不 知道 
你 的 JavaScript 对 象 结构 如 何 。 你 可 以 尝试 把 它们 全 部 转换 成 cany> ， 但 这 样 不 但 看 起 很 来 丑 而 且 
容易 出 错 。 

更 好 的 方案 是 给 TypeScript 编 译 器 提供 自 定义 类 型 注解 。 然 后 ， 编 译 右 就 能 用 这 些 类 型 信 | 
来 强化 你 的 JavaScript 代 码 了 。 

比如 ， 还 记得 我 们 是 怎样 在 AngularJS 版 本 的 makeNewPin 中 创建 图 钉 对 象 的 吗 ? 















































证 





code/conversion/AngularJS/js/app.js 


var makeNewPin = function() { 
return { 
"title": "Steampunk Cat", 
"description": "A cat wearing goggles", 
"user_name": "me", 
"avatar src": "images/avatars/me. jpg", 
"src": "/images/pins/cat. jpg", 
"url": "http://cats.com", 
"faved": false, 
"id": Math.floor(Math.random() * 10000).toString() 
j 
j 


ctrl.newPin - makeNewPin(); 

如 果 能 把 这 些 对 象 的 结构 告诉 编译 器 该 多 好 ! 那样 就 不 用 到 处 求助 于 any 了 。 

此 外 ,我 们 准备 在 AngularTypeScript 中 使 用 ui-router 中 的 $state 服 务 ， 同 样 要 把 这 个 服务 
中 有 哪些 可 用 的 函数 告诉 编译 器 。 

因此 ， 虽 然 为 TypeScript 提 供 自 定义 类 型 信息 是 TypeScript 的 分 内 之 事 ( 与 Angular 无 关 )， 但 
我 们 还 是 得 亲 力 亲 为 。 现 在 之 所 以 还 缺少 这 么 多 类 型 定义 文件 , 是 因为 TypeScript 才 发 布 没 多 久 ， 
仍然 相对 较 新 。 

在 本 节 中 ， 我 会 告诉 你 如 何 为 TypeScript 制 作 自 定义 类 型 文件 ( custom typing ). 









































476 % 16% 把 AngularJS 应 用 升级 到 Angular 





如 果 你 已 经 很 熟悉 如 何 创建 和 使 用 TypeScript 的 类 型 定义 文件 , 请 放心 大 胆 地 跳 
1. 类 型 文件 


在 TypeScript 中 , 可 以 通过 书写 类 型 定义 文件 (typing definition file ) 来 描述 我 们 的 代码 结构 。 
类 型 定义 文件 通常 以 扩展 名 .d.ts 结 尾 。 


当 我 们 写 TypeScript 代 码 时 ， 通 常 不 用 写 .dts 文 件 ， 因 为 TypeScript 文 件 本 身 已 经 包含 了 类 型 
息 。 只 有 当 要 为 某 些 外 来 的 JavaScript 代 码 添加 类 型 信息 时 ， 才 需要 写 .d.ts 文 件 。 


例如 ， 为 了 描述 我 们 的 图 钉 对 象 ， 可 以 为 它 写 一 个 interface。 


code/conversion/hybrid/js/app.d.ts 




















zi 


export interface Pin { 
title: string; 
description: string; 
user name: string; 
avatar src: string; 
src: string; 
url: string; 
faved: boolean; 
id: string; 


} 
注意 ， 我 们 不 是 在 声明 一 个 类 ， 也 没有 创建 实例 ， 而 是 定义 了 接口 的 形态 ( 类 型 )。 


要 使 用 .d.ts 文 件 ， 需 要 告诉 TypeScript 它 们 在 哪里 。 最 简单 的 方式 就 是 修改 tsconfig.json 文 件 。 
比如 ,假设 有 一 个 名 为 js/app.d.ts 的 文件 ， 我 们 就 可 以 像 这 样 添加 它 : 


// tsconfig.json 
"compilerOptions": { ... }, 
"files": [ 
"ts/app.ts", 
"js/app.d.ts" 
l, 


// more.. 
仔细 看 这 里 的 文件 路 径 。 我 们 要 从 ts/app.ts 中 加 载 TypeScript， 从 js/ 目 录 下 加 载 app.d.ts 文 件 。 
这 是 因为 js/app.d.ts 文 件 是 为 js/app.js( 这 是 AngularJS 的 JavaScript 文 件 , 而 不 是 Angular 的 TypeScript 
文件 ) 准备 的 类 型 文件 。 















































我 们 这 就 一 点 点 把 app.d.ts 写 出 来 。 首 先 来 看 一 个 现 有 工具 typings ， 以 帮助 我 们 使 用 第 三 方 
TypeScript 定 义 文 件 。 


2. 使 用 typings 管 理 第 三 方 库 
typings 是 一 个 用 来 为 第 三 方 库 管理 TypeScript 类 型 定义 文件 的 工具 。 
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我 们 准备 使 用 angular-ui-router ， 所 以 要 用 typings 来 安装 angular-ui-router 的 类 型 信 
息 。 下 面 是 操作 步骤 。 


先 安装 好 typings ， 可 以 用 命令 npm install -g typings 来 安装 。 





接 下 来 ， 








配置 一 个 typingsjson 文 件 ， 可 以 用 命令 typings init 来 创建 (或 者 使 用 现成 的 )。 

















然后 ， 我 们 通过 命令 typings install angular-ui-router --save 来 安装 所 需 的 包 。 











注意 ，typings 命 令 创 建 了 一 个 typings 目 录 ， 其 中 包含 文件 browserd.ts。 这 个 browser.d.fs 文 
件 是 所 有 被 typings 管 理 的 类 型 定义 文件 的 总 人 口 点 。 也 就 是 说 ， 如 果 你 写 了 自己 的 类 型 定义 文 
件 ， 那 么 它们 不 会 被 包含 在 这 里 ， 但 通过 typings 工 具 安 装 的 类 型 定义 都 会 被 加 载 到 此 文件 的 
reference 标 签 下 。 





A 




















不 要 直接 修改 typings/browser.d.ts 文 件 ! typings 会 蔡 你 管理 这 个 文件 。 如 果 你 
修改 了 它 ， 那 么 这 些 修 改 就 会 被 覆盖 。 











现在 , 我 们 有 了 类 型 定义 文件 typings/browser.d.ts, 该 如 何 使 用 它 呢 ? 我 们 得 先 把 它 告 诉 编译 


a AFT. AY 














以 通过 tsconfig.json 来 做 到 这 一 点 : 


// tsconfig.json 
"compilerOptions": { ... }, 
"files": [ 





], 


"typings/browser.d.ts", 
"ts/app.ts", 
"js/app.d.ts" 


// more... 


EXE, dXÍ[iHEtypings/browser.d.ts XAFRA] T filesZXZHrp, CURA a ETE TE 
时 包含 typings 下 的 类 型 信息 。 
































假如 我 们 要 加 载 另 一 个 库 ( 比如 underscore ), 而 且 同 样 希 望 用 System.js 加 载 它 ， 

该 怎么 办 呢 ? 

整体 思路 是 ， 你 要 : (1) 让 类 型 信息 在 编译 时 可 用 ; (2) 让 代码 在 运行 时 可 用 。 

具体 办 法 如 下 。 

(1) typings install underscore: 安装 类 型 信息 文件 。 

(2) npm install underscore: 在 node modules 中 安装 JavaScript 文 件 。 

(3) Æ index.html P 3 M System.config 49 X, A 4È paths F #7 Zn — 4] underscore: 

' . /node. modules/underscore/underscore.js', 

(4) 然后 在 TypeScript 中 通过 import x as _ from 'underscore'; FA FRA. 

(5) 最 后 使 用 下 划 线 ， 就 像 这 样 : let foo = _.map( [1,2,3], (x) => x + 1);o 16 
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我 们 已 经 在 这 个 应 用 中 做 完了 typings install， 所 以 你 不 必 自 己 安 装 这 些 依 
束 了 。 

实际 上 ， 如 果 你 运行 typings _ install ， 将 会 收 到 一 个 错误 : 

node. modules/angular2/typings/angular-protractor/angular-protractor.d.ts(1679,13N 


): error TS2403: Subsequent variable declarations must have the same type. Vari\ 
able '$' must be of type 'JQueryStatic', but here has type 'cssSelectorHelper'. 


iX 4 bug Al e codi ele 图 把 一 个 类 型 赋 给 $ 交 量 。 在 
本 书 出 版 时 ， 临 时 性 的 解决 方案 是 打开 typings/jquery/jquery.d.ts 文 件 ， 并 注释 掉 
这 一 行 : 

// declare var $: JQueryStatic; // - ng-book told me to comment this 

当然 ， 如 果 你 ? m 来 访问 jQuery 特有 的 类 型 信息 ， 就 会 出 错 
( 不 过 本 例 中 不 存在 这 种 情况 )。 


3. 自 定义 类 型 文件 


4b 
He 





更 月 











现成 的 第 三 方 类 型 定义 文件 固然 好 ， 不 过 还 有 一 些 场景 是 找 不 到 现 有 类 型 定义 文件 


的 ， 特 别 是 我 们 自己 写 的 代码 。 


通常 ， 当 我 们 写 自 定义 类 型 信息 文件 时 , 会 把 它 和 相应 的 JavaScript 代 码 放 在 一 起 , 因此 我 们 
来 创建 一 个 js/app.d.ts 文 件 。 











code/conversion/hybrid/js/app.d.ts 


declare module interestAppNgi { 


export interface Pin { 
title: string; 
description: string; 
user_name: string; 
avatar_src: string; 
src: string; 


} 


url: 


string; 


faved: boolean; 


id: 


string; 


export interface PinsService { 
pins(): Promise«Pin[]»; 
addPin(pin: Pin): Promise«any»; 


} 
} 


declare module 'interestAppNg1' { 
export = interestAppNg1; 


} 
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我 们 用 declare 关 键 字 来 制作 “周边 声明 ”( ambient declaration )， 意 思 是 我 们 定义 了 一 个 并 
非 来 自 于 TypeScript 文 件 的 变量 。 在 这 个 例子 中 ， 我 们 声明 了 两 个 接口 : 


(1)Pin 








(2) PinsService 
Pin 接 口 用 来 描述 图 钉 对 象 的 属性 名 及 其 值 类 型 。 
PinsService 接 口 则 用 来 描述 这 个 PinsService 中 两 个 方法 的 类 型 。 


口 pins() 返 回 一 个 由 Pin 数 组 构成 的 Promise ; 
口 addPin( ) 接 收 一 个 Pin 参 数 ， 并 返回 一 个 Promise。 











Q, 学 习 写 类 型 定义 文件 的 更 多 知识 


如 果 要 学 习 关 于 写 .d.ts 文 件 的 更 多 知识 ， 下 列 链接 会 很 有 帮助 : 

口 “TypeScript 手册: 与 其 他 JavaScript 库 协同 工作 ”( http:/Avww.types- 
criptlang.org/Handbook#modules-working-with-other-javascript-libraries ) 

口 “TypeScript 手 册 : 书写 类 型 定义 文件 ”( https://github.com/MicrosofyTypeScript- 
Handbook/blob/master/pages/Writing%20Definition%20Files.md ) 

口 “ 快 速 提 示 : TypeScript 的 declare 关键 字 ”( http://blogs.microsoft.co.il/ 
gilf/2013/07/22/quick-tip-typescript-declare-keyword/ ) 





你 可 能 已 经 注意 到 了 ， 我 们 并 没有 在 AngularJS 的 JavaScript 代 码 的 任何 地 方 声 明令 牌 
interestAppNg1 。 这 是 因为 interestAppNg1 只 是 我 们 用 来 在 TypeScript 代 码 中 引用 这 些 JavaScript 
代码 时 所 用 的 标识 符 ， 并 不 是 类 型 的 一 部 分 。 

我 们 已 经 完成 了 这 个 文件 ， 可 以 导入 这 些 类 型 了 ， 就 像 这 样 : 


import { Pin, PinsService } from 'interestAppNg1'; 









































16.6.5 & Angular B PinControlsComponent 
我 们 刚刚 明白 了 类 型 信息 ， 那 就 言 归 正 传 ， 继 续 看 混合 式 应 用 吧 。 


我 们 首先 要 做 的 是 写 一 个 Angular 版 的 PinControlsComponent, 这 样 才能 把 Angular 的 组 件 般 
入 到 AngularJS 的 指令 中 。PinControlsComponent 为 收藏 的 图 钉 显 示 心 型 图 标 ， 点 击 它 就 可 以 来 
回 切换 状态 。 


先 从 导入 Pin 类 型 开始 ， 然 后 定义 男 一 些 需要 的 常量 。 









































code/conversion/hybrid/ts/components/PinControlsComponent.ts 
/* 


* PinControls: a component that holds the controls for a particular pin 
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*/ 
import { 
Component, 
Input, 
Output, 
EventEmitter 
} from 'Gangular/core'; 
import { NgIf } from 'Gangular/common'; 
import { Pin } from 'interestAppNg1'; 


#2 F 5 eComponent Tff 


code/conversion/hybrid/ts/components/PinControlsComponent.ts 


@Component ( { 
selector: 'pin-controls', 
template: ^ 
«div class="controls"> 
«div class="heart"> 
«a (click)="toggleFav()"> 
«img src-"/images/icons/Heart-Empty.png" xngIf-z"!pin.faved" /> 
«img src-"/images/icons/Heart-Red.png" xngIf-"pin.faved" /> 
«/a» 
«/div» 
«/div» 


}) 
注意 ， 这 里 匹配 的 是 pin-controls 元 素 。 


我 们 的 模板 和 AngularJS 版 本 的 很 像 ， 只 是 把 (click) 和 #*ngIf 改 成 了 用 Angular 的 模板 语法 。 
现在 的 组 件 定 义 类 变 成 了 下 面 这 样 。 


code/conversion/hybrid/ts/components/PinControlsComponent.ts 





export class PinControlsComponent { 
GInput() pin: Pin; 
GOutput() faved: EventEmitter«Pin» - new EventEmitter«Pin»(); 


toggleFav(): void { 
this.faved.next(this.pin); 
j 
j 


注意 , 我 们 并 没有 在 ecomponent 注解 中 指定 inputs 和 outputs ， 而 是 直接 在 类 的 属性 上 使 用 
了 e@Input 和 @output 注 解 。 用 这 种 方式 为 属性 提供 类 型 信息 更 加 简便 。 

该 组 件 将 接收 一 个 pin 参 数 作为 输入 ， 也 就 是 我 们 管理 的 Pin 对 象 。 

该 组 件 指定 了 一 个 名 叫 faved 的 输出 参数 。 这 跟 我 们 在 AngularJS 应 用 中 的 用 法 略 有 不 同 。 如 
果 你 查看 toggleFav 的 实现 ， 会 发 现 我 们 所 做 的 是 通过 EventEmitter 把 当前 图 钉 发 给 了 外 界 。 


这 是 因为 我 们 已 经 在 AngularJS 中 实现 了 更 改 faved 状 态 的 方法 ,所 以 不 希望 在 Angular 中 重新 
实现 一 模 一 样 的 功能 (但 你 也 可 能 希望 再 次 实现 ， 这 取决 于 你 们 开发 组 内 的 约定 )。 
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16.6.6 ”使 用 Angular 的 PinControlsComponent 


有 了 Angular 的 pin-controlls 组 件 ， 我 们 就 可 以 在 模板 中 使 用 它 了 。 现 在 的 pin.html 模 板 变 
成 了 下 面 这 样 。 


code/conversion/hybrid/templates/pin.html 


«div class="col-sm-6 col-md-4"» 
«div class="thumbnail"> 
«div class="content"> 
<img ng-src="{{pin.src}}" class-"img-responsive"» 
<div class="caption"> 
<h3>{{pin.title}}</h3> 
<p>{{pin.description | truncate:100]]«/p» 
</div> 
<div class="attribution"> 
<img ng-src="{{pin.avatar_src}}" class-"img-circle"» 
<h4>{{pin.user_name}}</h4> 
</div> 
</div> 
<div class="overlay"> 
<pin-controls [pin]="pin" 
(faved )="toggleFav($event )"></pin-controls> 
</div> 
</div> 
</div> 


该 模板 是 属于 AngularJS 指 令 的 ， 因 此 我 们 可 以 在 里 面 使 用 AngularJS 的 指令 ， 比 如 ng-src。 
不 过 ， 要 注意 使 用 Angular 中 pin-controls 组 件 的 那 一 行 : 


<pin-controls [pin]="pin" 
( faved )="toggleFav($event )"></pin-controls> 


有 意思 的 是 ,我 们 在 同时 使 用 Angular 输 入 属性 的 方 括号 语法 [pin] 以 及 Angular 输 出 属性 的 圆 
括号 语法 (faved)。 

































































在 混合 式 应 用 中 ， 当 你 在 AngularJS 中 使 用 Angular 指 令 时 ， 仍 然 可 以 照常 使 用 Angular 的 语法 。 
通过 输入 属性 [pin] ， 可 以 把 来 自 AngularJS 指 令 scope 上 的 pin 属 性 传 进去 。 


在 输出 参数 (faved) 中 , Fe WAH f AngularISt§ scope LAtoggleFav ý% ER AIX LAY 
实现 方式 : 我 们 没有 在 Angular 指 令 中 修改 pin. faved RAS (虽然 我 们 也 能 这 么 做 ); Rm. €f] 
只 是 让 Angular 的 PinControlsComponent 在 调用 toggleFav 的 时 候 把 这 个 pin 发 给 外 界 。( 如 果 没 
看 明白 ， 请 再 回头 看 看 PinControlsComponent 的 toggleFav。) 


我 们 这 么 做 是 为 了 告诉 你 : 可 以 保持 AngularJS 中 的 现 有 功能 ( scope.toggleFav ) AA, 只 
把 组 件 迁 移 到 Angular。 在 这 个 例子 中 ，AngularJS 的 pin 指 令 监 听 了 Angular PinControls- 
Component 上 的 faved 事 件 。 
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如 果 你 刷新 这 个 页 面 , 可 能 会 注意 到 它 无 法 正常 工作 , 那 是 因为 我 们 还 缺少 一 个 很 重要 的 步 














BR. 把 PinControlsComponent 降级 到 AngularJS D 


16.6.7 #2 Angular 89 PinControlsComponent 降级 到 AngularJS 


























要 想 让 我 们 的 组 件 跨 越 Angular 和 AngularJS 的 界线 ， 最 后 一 步 是 使 用 upgradeAdapter 来 降级 


这 些 组 件 〈 或 者 升级 ， 我 们 稍 后 会 看 到 )。 











我 们 在 app.ts 文 件 中 执行 这 些 降级 工作 C 也 就 是 调用 upgradeAdapter bootstrap 的 地 方 Jo 


首先 ， 我 们 需要 导入 必 备 的 angular 库 。 


code/conversion/hybrid/ts/app.ts 


import { 

NgModule, 

forwardRef 

} from 'Gangular/core'; 

import { CommonModule } from '@angular/common' ; 

import { 

FormsModule, 

} from '@angular/forms'; 

import { BrowserModule } from "eangular/platform-browser"; 
import { UpgradeAdapter } from '@angular/upgrade' ; 

declare var angular: any; 

import 'interestAppNgi'; // "bare import" for side-effects 


然后 ， 我 们 用 (几乎 ) 标准 的 AngularJS 方 式 来 创建 一 个 .directive。 











code/conversion/hybrid/ts/app.ts 


angular .module('interestApp' ) 
.directive('pinControls', 
upgradeAdapter . downgradeNg2Component(PinControlsComponent ) ) 


记 住 我 们 已 经 导入 了 ' interestAppNg1' ， 它 会 加 载 我 们 的 AngularJS 应 用 ， 而 AngularJS 应 用 
中 调用 了 angular.module('interestApp'，[])。 也 就 是 说 ， 我 们 的 AngularJS 应 用 已 经 通过 





angular 注 册 好 了 interestApp 模 块 。 








现在 , 我 们 要 通过 调用 angular .module('interestApp' ) 来 找到 该 模块 , 然后 把 才 


其 中 ， 就 像 我 们 在 AngularJS 中 的 标准 做 法 那样 。 


o angular.module 的 获取 (getter) 和 设置 (setter ) 语法 




















昌 令 添加 到 


还 记得 吗 ? 当 往 angular.module 函 数 的 第 二 个 参数 中 传 入 一 个 数组 时 ， 我 们 就 


是 在 创建 模块 。 比 如 angular.module('foo'，[]) 将 创建 一 个 名 叫 foo 的 
我 们 非 正 式 地 将 其 称 为 设置 语法 。 


模块 。 


同样 ， 如 果 我 们 省 略 了 这 个 数组 ， 就 是 在 获取 一 个 模块 (假设 它 已 经 存在 ) 。 6 


deangular .module(' foo' ) 将 获取 foo 模 块 。 我 们 称 其 为 获取 语法 。 
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在 这 个 例子 中 ， 如 果 我 们 忘 了 这 项 限制 ， 并 且 在 appts ( Angular) 中 调用 
angular.module('interestApp', []), #A IMLA SMA WH interestApp 
模块 。 你 的 应 用 将 无 法 正常 工作 。 千 万 要 小 心 ! 


我 们 调用 .directive 并 创建 了 一 个 名 叫 'pinControls' 的 指令 。 这 是 一 种 标准 的 AngularJS 
实践 。 它 的 第 二 个 参数 是 指令 定义 对 象 ( directive definition object, DDO )， 我 们 不 会 手动 创建 
DDO， 而 是 调用 upgradeAdapter .downgradeNg2Component o 











downgradeNg2Component 会 把 我 们 的 PinControlsComponent 转 换 成 与 AngularJS 兼 容 的 指 
4. 干净 ! 漂亮 ! 


刷新 一 下 ， 你 会 发 现 收 藏 功能 仍然 正常 工作 ( 如 图 16-8 所 示 )， 但 我 们 已 经 把 目前 的 实现 方 
3X E AngularJSrPi A Angular T ! 








图 16-8 ”收藏 功能 仍然 很 棒 


16.6.8 用 Angular 添加 图 钉 
接 下 来 要 用 Angular 组 件 对 添加 图 钉 的 页 面 进行 升级 ( 如 图 16-9 所 示 )。 


© 9 @ / [ ng-book 2: interest 


i 








xp 
M" | 


|e Œ | D localhost:8080/#/add 





Interest what you're interested in 


Home Add 


Title Steampunk Cat 
Description Acat wearing goggles 
LinkURL — — http///cats.com 
ImageURL  /images/pins/catjpg 


Submit 








图 16-9 ”新 增 图 钉 的 表单 
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回想 一 下 ， 这 个 页 面 一 共 做 了 三 件 事 : 

(1) 为 用 户 提供 一 个 用 来 描述 这 个 图 钉 的 表单 ; 

(2) 借助 PinsService 把 新 的 图 钉 添 加 到 图 钉 列 表 中 ; 

(3) 把 用 户 重 定向 到 首页 。 

我 们 来 看 看 该 如 何在 Angular 中 做 到 这 些 。 

Angular 提 供 了 一 个 强力 的 表单 库 ， 所 以 这 没什么 难度 。 那 我 们 就 来 写 一 个 正统 的 Angular 表 
PANE 

不 过 ,PinsService 仍 然 来 自 AngularJS。 通常 ,我 们 会 有 很 多 来 自 AngularJS 的 既 有 服务 , 但 
又 没 那 么 多 时 间 把 它们 都 改写 成 Angular 的 。 因 此 在 这 个 例子 中 , 我 们 仍然 把 PinsService 保 留 为 
AngularJS 对 象 ， 并 把 它 注 入 到 Angular 中 。 


与 之 类 似 ， 我 们 把 来 自 AngularJS 的 ui-router 作 为 路 由 系统 。 要 想 在 ui-router 中 进行 页 面 
跳 转 ， 就 得 使 用 $state 服 务 ， 它 是 一 个 AngularJS 服 务 。 

那么 ， 在 这 里 要 做 的 就 是 把 PinsService 和 $state 服 务 从 AngularJS 升 级 到 Angular， 这 已 经 
是 最 简易 的 方式 了 。 


















































16.6.9 把 AngularJS 的 PinsService 和 $state 升级 到 Angular 





要 想 升 级 AngularJS 的 服务 ， 我 们 可 以 调用 upgradeAdapter .upgradeNg1Provider。 


code/conversion/hybrid/ts/app.ts 

/* 

* Expose our AngularJS content to Angular 

*/ 
upgradeAdapter . upgradeNg1Provider( 'PinsService'); 
upgradeAdapter . upgradeNg1Provider( '$state'); 


这 样 就 足够 了 。 现 在 我 们 可 以 把 AngularJS 的 服务 注入 (@Inject ) 到 Angular 的 组 件 中 ， 就 像 
这 样 : 
class AddPinComponent { 
constructor(@Inject('PinsService') public pinsService: PinsService, 
GInject('$state') public uiState: IStateService) { 
j 
ff aes 
// now you can use this.pinsService 
// or this.uiState 
P3 es 
j 


在 这 个 构造 函数 中 ， 有 几 点 需要 注意 。 
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@Inject 注 解 的 意思 是 ， 我 们 要 把 参数 中 指定 的 可 注入 对 象 解析 出 来 ， 赋 值 给 紧 随 其 后 的 变 
量 。 比 如 这 里 的 pinsService 将 被 赋值 为 我 们 在 AngularJS 中 定义 的 服务 PinsService。 


在 TypeScript 语 法 中 ， 在 constructor 中 使 用 public 关 键 字 其 实 是 一 种 简写 形式 ， 用 来 把 该 
变量 赋值 给 this。 也 就 是 说 ， 当 我 们 写 public pinsService 时 ， 其 实 是 在 做 两 件 事 : (1) 在 该 类 
上 定义 一 个 实例 属性 pinsService ; (2) 把 构造 函数 的 参数 pinsService 赋 值 给 this.pins- 
Service. 

最 终 的 效果 是 我 们 可 以 在 这 个 类 中 访问 this.pinsService 了 。 

最 后 ， 我 们 定义 了 所 注入 的 两 个 服务 的 类 型 : PinsService 和 IStateService。 

PinsService 来 自我 们 以 前 定义 过 的 app.d.ts。 






































code/conversion/hybrid/js/app.d.ts 


export interface PinsService { 
pins(): Promise<Pin[]>; 
addPin(pin: Pin): Promise«any»; 


} 











IStateService 来 自 ui-router 的 类 型 文件 ， 它 是 我 们 以 前 用 typings 工 具 安 装 的 。 


通过 把 这 些 服 务 的 类 型 信息 告诉 TypeScript， 我 们 在 写 代码 时 就 可 以 享受 类 型 检查 带 来 的 好 
处 了 。 


下 面 来 写 完 AddPinComponent 的 剩余 部 分 。 

















16.6.10 5; Angular 版 的 AddPinComponent 
我 们 先 从 导入 所 需 的 类 型 信息 开始 。 





code/conversion/hybrid/ts/components/AddPinComponent.ts 
/* 


* AddPinComponent: a component that controls the "add pin" page 
*/ 
import { 
Component, 
Inject 
} from 'Gangular/core'; 
import { Pin, PinsService } from 'interestAppNg1'; 
import { IStateService } from 'angular-ui-router'; 


注意 ， 我 们 导入 了 自 定义 类 型 pin 和 PinsService ， 还 从 angular-ui-router 中 导入 了 


IStateService,; 


1. AddPinComponentBü'éComponent 


这 个 ecomponent 注 解 非常 简明 。 
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code/conversion/hybrid/ts/components/AddPinComponent.ts 


@Component ( { 

selector: 'add-pin', 

templateUrl: '/templates/add-Angular.html' 
}) 


2. AddPinComponent {KiK 


我 们 使 用 kemplateUr1 来 加 载 模板 。 在 该 模板 中 ， 我 们 的 表单 和 AngularJS 中 的 表单 非常 像 ， 
但 所 用 的 是 Angular 的 表单 指令 集 。 





我 们 在 这 里 不 准备 深入 讲解 hgModel/ngSubmit。 如 果 你 想 深入 了 解 Angular 表 单 
的 工作 原理 ， 请 阅读 第 5 章 ， 我们 在 那里 对 表单 进行 了 详细 讲解 。 


code/conversion/hybrid/templates/add-Angular.html 


«div class="container"> 
<div class="row"> 


«form (ngSubmit)="onSubmit()" 
class-"form-horizontal"» 


«div class-"form-group"» 
«label for="title" 
class-"col-sm-2 control-label"»Title«/label» 
«div class-"col-sm-10"» 

«input type="text" 
class-"form-control" 
id-"title" 
name-"title" 
placeholder="Title" 
[(ngModel)]2"newPin.title"» 

«/div» 


这 里 使 用 了 两 个 指令 : ngSubmit 和 ngModel。 


我 们 在 表单 上 使 用 了 (ngSubmit)。 这 样 当 表单 被 提交 时 ， 就 会 调用 onSubmit 函数 。( 我 们 会 
在 稍 后 的 AddPinComponent 控 制 器 中 定义 onSubmit 函数 。) 


我 们 使 用 [(ngModel )] 来 把 title 输 入 框 的 值 绑 定 到 控制 器 中 newPin.title 的 值 。 
下 面 是 完整 的 模板 代码 。 


code/conversion/hybrid/templates/add-Angular.html 

















«div class="container"> 
<div class="row"> 


«form (ngSubmit)="onSubmit()" 
class-"form-horizontal"» 
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<div class-"form-group"» 
«label for="title" 
class-"col-sm-2 control-label"»Title«/label» 
«div class-"col-sm-10"» 
«input type="text" 
class="form-control" 
id="title" 
name="title" 
placeholder="Title" 


[(ngModel)]2"newPin.title"» 
«/div» 


«/div» 


«div class-"form-group"» 
«label for="description" 
class-"col-sm-2 control-label"»Description</label> 
«div class-"col-sm-10"» 
«input type="text" 
class="form-control" 
id="description" 
name="description" 
placeholder="Description" 


[ (ngModel )]="newPin.description"> 
</div> 


</div> 


<div class=" form-—group"> 
«label for="url" 
class-"col-sm-2 control-label"»Link URL«/label» 
«div class-"col-sm-10"» 
«input type="text" 
class="form-control" 
id-"url" 
name="url1" 
placeholder="Link URL" 


[ (ngModel ) ]="newPin.url"> 
</div> 
</div> 


<div class=" form-—group"> 

«label for="url" 
class-"col-sm-2 control-label"»Image URL«/label» 

«div class-"col-sm-10"» 

«input type="text" 

class="form-control" 
id-"url" 
name-z"url" 
placeholder="Image URL" 


[(ngModel)]2"newPin.srce"» 
«/div» 


«/div» 


«div class-"form-group"» 


«div class="col-sm-offset-2 col-sm-10"» 
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<button type="submit" 
class="btn btn-default" 
>Submit</button> 
</div> 
</div> 
«div *xngI f="saving"> 
Saving... 
</div> 
</form> 


3. AddPinComponent #4 #ill #3 
现在 我 们 就 可 以 定义 AddPinComponent 了 。 先 从 两 个 实例 变量 开始 。 


code/conversion/hybrid/ts/components/AddPinComponent.ts 
export class AddPinComponent { 

saving: boolean = false; 

newPin: Pin; 


saving 会 告诉 用 户 我 们 正在 进行 保存 ， 而 newPin 用 于 存储 我 们 正在 使 用 的 Pin 对 象 。 


code/conversion/hybrid/ts/components/AddPinComponent.ts 





constructor(@Inject('PinsService') private pinsService: PinsService, 
GInject('$state') private uiState: IStateService) [f 
this.newPin = this.makeNewPin(); 


} 


如 前 所 述 ， 我 们 用 Inject 在 constructor 中 注 人 了 这 些 服 务 ， 并 且 把 this.newPin 的 值 设 置 
成 了 makeNewPin 5 也 就 是 下 面 这 个 函数 。 








code/conversion/hybrid/ts/components/AddPinComponent.ts 


makeNewPin(): Pin { 
return { 
title: 'Steampunk Cat', 
description: 'A cat wearing goggles', 
user name: 'me', 
avatar src: 'images/avatars/me.jpg', 
src: '/images/pins/cat.jpg', 
url: 'http://cats.com', 
faved: false, 
id: Math.floor(Math.random() * 10000).toString() 
I 
} 


这 看 起 来 很 像 AngularJS 中 的 定义 方式 ， 不 过 这 种 方式 现在 的 优点 在 于 它 是 带 类 型 信息 的 。 
当 用 户 提交 表单 时 ， 我 们 调用 onSubmit ， 其 定义 如 下 所 示 。 


code/conversion/hybrid/ts/components/AddPinComponent.ts 


onSubmit(): void { 
this.saving = true; 
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console.log('submitted', this.newPin); 
setTimeout(() => { 
this.pinsService.addPin(this.newPin).then(() => { 
this.newPin = this.makeNewPin(); 
this.saving = false; 
this.uiState.go('home'); 
35 
}, 2000); 
} 


我 们 再 次 使 用 超时 (timeout ) 技术 来 模拟 通过 向 服务 器 发 起 请 求 来 保存 图 钉 的 效果 。 这 里 我 
们 使 用 的 是 setTimeout 。 下 面 对 比 一 下 在 AngularJS 中 实现 同样 功能 的 写法 。 




















code/conversion/AngularJS/js/app.js 


ctrl.submitPin = function() { 
ctrl.saving = true; 
$timeout(function() { 
PinsService.addPin(ctrl.newPin).then(function() { 
ctrl.newPin = makeNewPin(); 
ctrl.saving = false; 
$state.go('home'); 


Fs 
}, 2000); 


} 

注意 ， 我 们 在 AngularJS 中 必须 使 用 $timeout 服 务 。 为 什么 呢 ?” 这 是 因为 AngularJS 是 基于 摘 

要 循环 (digest loop) 的 。 如 果 你 在 AngularJS 中 直接 使 用 setTimeout， 那 么 当 调 用 回调 函数 时 ， 
它 会 处 于 Angular 的 控制 范围 之 外 。 因 此 改动 造成 的 影响 不 会 扩散 出 来 ， 除 非 某 些 代码 触发 了 摘 
要 循环 ( 比如 使 用 $scope .apply )。 


然而 在 Angular 中 ， 你 可 以 直接 使 用 setTimeout ， 因 为 Angular 中 的 变更 检测 使 用 的 是 Zones ， 
所 以 更 加 自动 化 。 你 再 也 不 用 担心 摘要 循环 了 ， 这 太 好 了 ! 
在 onSubmit 中 ， 我 们 通过 下 列 代 码 调用 了 PinsService : 


this.pinsService.addPin(this.newPin).then(() => { 


INT a 




































































PinsService 可 以 通过 this.pinsService 来 访问 ， 因 为 我 们 定义 constructor 时 使 用 了 特殊 
写法 。 编 译 吉 没有 报错 ， 这 是 因为 我 们 已 经 在 app.d.ts 中 声明 过 addPin 接 收 一 个 Pin 对 象 作为 第 一 
个 参数 。 

















code/conversion/hybrid/js/app.d.ts 
export interface PinsService { 
pins(): Promise«Pin[]»; 
addPin(pin: Pin): Promise«any»; 


} 
我 们 还 把 this.newPin 定 义 成 了 一 个 Pin 对 象 。 
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addPin 解 析 完 成 后 ， 我 们 把 this.newPin 重 置 为 this.makeNewPin() 的 结果 ， 并 设置 this . 











saving = false. 











要 返回 首页 ， 就 要 使 用 ui-router 的 $state 服 务 。 我 们 已 经 通过 依赖 注入 把 它 存储 到 了 











this.uiState 属 性 中 ， 所 以 可 以 直接 调用 this.uiState.go('home') 来 变更 状态 。 











16.6.11 使 用 AddPinComponent 
我 们 现在 就 来 使 用 AddPinComponent。 
1. 降级 Angular 的 AddPinComponent 


要 想 使 用 AddPinComponent ， 就 得 先 把 它 降级 。 














code/conversion/hybrid/ts/app.ts 


angular .module('interestApp' ) 
.directive('pinControls', 
upgradeAdapter . downgradeNg2Component(PinControlsComponent ) ) 
.directive('addPin', 
upgradeAdapter . downgradeNg2Component(AddPinComponent ) ) ; 


这 会 在 AngularJS 中 创建 一 个 addPin 指 令 ， 它 会 匹配 caddq-piny> 标 签 。 


2. 路 由 到 add-pin 





为 了 使 用 这 个 新 的 AddPinComponent 页 就 要 把 它 放 进 AngularJS 应 用 中 的 某 个 地 方 。 这 








只 要 让 路 由 器 拿 到 这 个 add 状 态 ， 并 把 <add-piny 指 令 放 到 模板 中 就 可 以 了 。 


code/conversion/hybrid/js/app.js 








.state('add', { 
template: "«add-pin»«/add-pin»", 
url: '/add', 
resolve: { 
'pins': function(PinsService) { 
return PinsService.pins(); 
} 
} 
}) 


16.6.12 ”把 Angular 的 服务 暴露 给 AngularJS 








很 简 


目前 ， 我 们 已 经 降级 了 Angular 的 组 件 使 其 能 用 在 AngularJS 中 ， 还 升级 了 AngularJS 的 服务 使 
其 能 用 在 Angular 中 。 但 是 当 我 们 的 应 用 开始 升级 到 Angular 时 ， 可 能 会 需要 用 TypeScriptAngular 











写 一 些 服 务 ， 并 把 它 暴 露 给 AngularJS 的 代码 。 
那么 我 们 就 在 Angular 中 创建 一 个 简单 的 “分 析 ”( analytics ) 服务 ， 用 来 记录 事件 。 








我 们 的 想法 是 : 在 应 用 中 有 一 个 AnalyticsService, 我 们 将 调用 它 的 recordEvent 方 法 。 在 
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具体 实现 上 ， 我们 只 会 调用 console.1og 来 记录 该 事件 ， 并 把 它 存 到 一 个 数组 中 。 这 样 做 是 为 了 
把 精力 集中 在 最 重要 的 事情 上 : 描述 如 何 把 Angular 的 服务 共享 给 Angular]S。 











16.6.13 SEH! AnalyticsService 
我 们 先 来 看 看 AnalyticsService 的 实现 。 





code/conversion/hybrid/ts/services/AnalyticsService.ts 


import { Injectable } from '@angular/core'; 


/ 
* Analytics Service records metrics about what the user is doing 
*/ 

@Injectable() 

export class AnalyticsService { 
events: string[] = []; 


public recordEvent(event: string): void { 
console.log(^ Event: ${event}>); 
this.events.push(event); 
j 
j 


export var analyticsServiceInjectables: Array«any» - [ 
{ provide: AnalyticsService, useClass: AnalyticsService } 


]; 





这 里 需要 注意 两 点 : recordEvent fill njectable。 








recordEvent 很 简明 : 我 们 接收 一 个 event: string 参 数 ， 输 出 它 的 日 志 ， 并 且 把 它 保存 到 
events Fo 在 现实 世界 的 应 用 中 , 你 可 能 会 把 它 发 给 某 个 外 部 服务 , 比如 Google 分 析 或 Mixpanel。 


要 让 该 服务 可 注入 ， 我 们 得 做 两 件 事 : (1) 为 该 类 添加 eInjectable 注 解 ; (2) 把 
AnalyticsService 这 个 令 牌 pind 到 该 类 。 


现在 ，Angular 将 会 管理 该 服务 的 单 例 对 象 ， 而 我 们 可 以 把 它 注入 到 任何 需要 它 的 地 方 了 。 









































16.6.14 把 Angular 的 AnalyticsService 降级 到 AngularJS 


在 AngularJS 中 使 用 AnalyticsService 服 务 之 前 ， 我 们 需要 把 它 降 级 。 


巴 Angular 服 务 降 级 到 AngularJS 的 过 程 和 指令 的 降级 过 程 很 相似 ， 只 不 过 多 出 了 一 个 额外 的 
步骤: 得 先 确 保 AnayticsService 出 现在 了 我 们 这 个 NgModule 的 providers 列 表 中 。 








A 








code/conversion/hybrid/ts/app.ts 


@NgModule( { 
declarations: [ 
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PinControlsComponent, 
AddPinComponent 
l, 
imports: [ 
CommonModule, 
BrowserModule, 
FormsModule 
l, 
providers: [ 
AnalyticsService, 
] 
}) 
class InterestAppModule { } 


然后 就 可 以 使 用 downgradeNg2Provider To 








code/conversion/hybrid/ts/app.ts 





angular .module('interestApp') 
.factory('AnalyticsService', 
upgradeAdapter.downgradeNg2Provider(AnalyticsService)); 


我 们 先 调用 angular .module('interestApp ' ) 来 取得 AngularJS 的 模块 ， 然 后 像 在 AngularJS 
中 一 样 调用 . factory, 要 想 降 级 该 服务 ， 要 调用 upgradeAdapter . downgradeNg2Provider 
(AnalyticsService) 它 会 把 我 们 的 AnalyticsService 包 装 到 一 个 函数 中 ， 而 该 函数 会 把 它 适 
配 成 一 个 AngularJS 的 工厂 〈factory ). 


16.6.15 在 AngularJS 中 使 用 AnalyticsService 


现在 就 可 以 把 Angular 的 AnalyticsService 注 入 到 AngularJS 中 去 了 。 假 如 我 们 想 记 录 
HomeController 是 什么 时 候 被 访问 的 ， 就 可 以 像 下 面 这 样 来 记录 此 事件 。 














code/conversion/hybrid/js/app.js 


.controller('HomeController', function(pins, AnalyticsService) { 
AnalyticsService.recordEvent( 'HomeControllerVisited'); 
this.pins = pins; 


}) 
这 里 注入 了 AnalyticsService ， 就 像 它 是 AngularJS 中 的 普通 服务 一 样 ， 然 后 调用 
recordEvent, HUE! 


我 们 可 以 在 AngularJS 中 任何 能 使 用 依赖 注入 的 地 方 使 用 该 服务 。 比 如 ， 我 们 也 可 以 把 
AnalyticsService 注 入 到 AngularJS 的 pin 指 令 中 。 























code/conversion/hybrid/js/app.js 


.directive('pin', function(AnalyticsService) { 
return { 
restrict: 'E', 
templateUrl: '/templates/pin.html', 
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scope: { 
'pin': "=item" 
}, 
link: function(scope, elem, attrs) { 
scope.toggleFav = function() { 
AnalyticsService.recordEvent('PinFaved'); 
scope.pin. faved = !scope.pin. faved; 
} 
} 
} 
}) 


16.7 总 结 


现在 我 们 掌握 了 把 AngularJS 应 用 升级 到 AngularJS/Angular 混 合式 应 用 时 所 需 的 工具 。 
AngularJS 和 Angular 之 间 也 有 非常 好 的 互 操作 性 ,这 是 因为 Angular 开 发 组 付出 了 很 多 努力 来 对 其 
进行 简化 。 
AngularJS 和 Angular 的 指令 与 服务 之 间 能 够 互通 ， 让 应 用 升级 变 得 非常 容易 。 当 然 ， 我 们 不 
可 能 一 夜 之 间 就 把 AngularJS 的 应 用 升级 到 Angular， 不 2 Ei 上 我 们 不 必 把 那些 老 
代码 扔 掉 就 开始 使 用 Angular。 











16.8 ”参考 资源 


如 果 你 想 了 解 关于 混合 式 Angular 应 用 的 更 多 知识 ， 可 以 参阅 下 列 资源 。 


口 官方 的 Angular 升 级 指南 (中文 版 ): https://angular.cn/docs/ts/latest/guide/upgrade.html 

口 Angular 升级 模块 的 单元 测试 : https://github.com/angular/angular/blob/master/modules/ 
angular2/test/upgrade/upgrade_spec.ts 

Q Angular 'fDowngradeNg2ComponentAdapter 的 源 代码 : https://github.com/angular/angular/ 
blob/master/modules/angular2/src/upgrade/downgrade_Angular_adapter.ts 











延 展 qe] dx 

































































JavaScript 这 门 语言 简单 易 用 ， 很 容易 上 手 ， 但 其 语言 机 制 复杂 微妙 ， 即 使 是 经 验 
(ele suo a 丰富 的 JavaScript 开 发 人 员 ， 如 果 没 有 认真 学 习 的 话 也 无 法 ] IS. “你 不 知道 
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